<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>ant-design-pro(react+umi+ts+hooks) | Plana(方案A)</title>
    <meta name="generator" content="VuePress 1.5.2">
    <link rel="icon" href="https://luo0412.gitee.io/static/images/logo/favicon.ico">
    <script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>$(function () {
    $(".navbar .dropdown-wrapper .title").each(function (index, item) {
        var title = $(item).text() || ""
        console.log(title)
        var index = title.indexOf("(")
        if (index > -1) {
            $(item).text(title.slice(0, index))
        }
    })
})

((window.gitter = {}).chat = {}).options = {
    room: 'luo0412/plana'
};</script>
    <script src="https://sidecar.gitter.im/dist/sidecar.v1.js"></script>
    <meta name="description" content="方案A">
    <link rel="preload" href="/plana/assets/css/0.styles.e9cba6b3.css" as="style"><link rel="preload" href="/plana/assets/js/app.26a35d46.js" as="script"><link rel="preload" href="/plana/assets/js/2.b5bc497d.js" as="script"><link rel="preload" href="/plana/assets/js/466.272ea41f.js" as="script"><link rel="prefetch" href="/plana/assets/js/10.76967f04.js"><link rel="prefetch" href="/plana/assets/js/100.5188df2c.js"><link rel="prefetch" href="/plana/assets/js/101.d84c20f9.js"><link rel="prefetch" href="/plana/assets/js/102.dcbad92b.js"><link rel="prefetch" href="/plana/assets/js/103.cbf31594.js"><link rel="prefetch" href="/plana/assets/js/104.227d809c.js"><link rel="prefetch" href="/plana/assets/js/105.4690789d.js"><link rel="prefetch" href="/plana/assets/js/106.76527743.js"><link rel="prefetch" href="/plana/assets/js/107.d6e3a4d6.js"><link rel="prefetch" href="/plana/assets/js/108.6e4c8bfc.js"><link rel="prefetch" href="/plana/assets/js/109.fc12471e.js"><link rel="prefetch" href="/plana/assets/js/11.569e93dd.js"><link rel="prefetch" href="/plana/assets/js/110.85c3d834.js"><link rel="prefetch" href="/plana/assets/js/111.9c605bc7.js"><link rel="prefetch" href="/plana/assets/js/112.12b9e5d6.js"><link rel="prefetch" href="/plana/assets/js/113.21ac7878.js"><link rel="prefetch" href="/plana/assets/js/114.e4dd9de7.js"><link rel="prefetch" href="/plana/assets/js/115.8600fa46.js"><link rel="prefetch" href="/plana/assets/js/116.043898d2.js"><link rel="prefetch" href="/plana/assets/js/117.5c6253ed.js"><link rel="prefetch" href="/plana/assets/js/118.0deaa07b.js"><link rel="prefetch" href="/plana/assets/js/119.0e1b78e7.js"><link rel="prefetch" href="/plana/assets/js/12.f97471e0.js"><link rel="prefetch" href="/plana/assets/js/120.da2dcbe4.js"><link rel="prefetch" href="/plana/assets/js/121.b67072a1.js"><link rel="prefetch" href="/plana/assets/js/122.4438dfd8.js"><link rel="prefetch" href="/plana/assets/js/123.ffb881d0.js"><link rel="prefetch" href="/plana/assets/js/124.ae643d5d.js"><link rel="prefetch" href="/plana/assets/js/125.782ff172.js"><link rel="prefetch" href="/plana/assets/js/126.9cb23b0a.js"><link rel="prefetch" href="/plana/assets/js/127.2c5e040e.js"><link rel="prefetch" href="/plana/assets/js/128.f96c3297.js"><link rel="prefetch" href="/plana/assets/js/129.379dad87.js"><link rel="prefetch" href="/plana/assets/js/13.40058c53.js"><link rel="prefetch" href="/plana/assets/js/130.f350d8cd.js"><link rel="prefetch" href="/plana/assets/js/131.9b494f44.js"><link rel="prefetch" href="/plana/assets/js/132.8a6c409e.js"><link rel="prefetch" href="/plana/assets/js/133.c691db55.js"><link rel="prefetch" href="/plana/assets/js/134.e8d8a94a.js"><link rel="prefetch" href="/plana/assets/js/135.c95a1ef6.js"><link rel="prefetch" href="/plana/assets/js/136.bdd4250b.js"><link rel="prefetch" href="/plana/assets/js/137.539d6db6.js"><link rel="prefetch" href="/plana/assets/js/138.c16e3cc1.js"><link rel="prefetch" href="/plana/assets/js/139.7a1243ca.js"><link rel="prefetch" href="/plana/assets/js/14.880c2d4f.js"><link rel="prefetch" href="/plana/assets/js/140.6ed0a182.js"><link rel="prefetch" href="/plana/assets/js/141.a984158d.js"><link rel="prefetch" href="/plana/assets/js/142.e094f73f.js"><link rel="prefetch" href="/plana/assets/js/143.760a5510.js"><link rel="prefetch" href="/plana/assets/js/144.212ede62.js"><link rel="prefetch" href="/plana/assets/js/145.2e06e4c9.js"><link rel="prefetch" href="/plana/assets/js/146.16713494.js"><link rel="prefetch" href="/plana/assets/js/147.7b0585c3.js"><link rel="prefetch" href="/plana/assets/js/148.ae82990b.js"><link rel="prefetch" href="/plana/assets/js/149.73a7c703.js"><link rel="prefetch" href="/plana/assets/js/15.5364aa14.js"><link rel="prefetch" href="/plana/assets/js/150.fec18e0b.js"><link rel="prefetch" href="/plana/assets/js/151.14bf6cea.js"><link rel="prefetch" href="/plana/assets/js/152.17f17b04.js"><link rel="prefetch" href="/plana/assets/js/153.ba7c5f21.js"><link rel="prefetch" href="/plana/assets/js/154.d3340db4.js"><link rel="prefetch" href="/plana/assets/js/155.2bf1dbde.js"><link rel="prefetch" href="/plana/assets/js/156.70d23de7.js"><link rel="prefetch" href="/plana/assets/js/157.93a62465.js"><link rel="prefetch" href="/plana/assets/js/158.bf486b60.js"><link rel="prefetch" href="/plana/assets/js/159.f19e7955.js"><link rel="prefetch" href="/plana/assets/js/16.e96c9bd3.js"><link rel="prefetch" href="/plana/assets/js/160.3dc61d59.js"><link rel="prefetch" href="/plana/assets/js/161.0fff4227.js"><link rel="prefetch" href="/plana/assets/js/162.70526488.js"><link rel="prefetch" href="/plana/assets/js/163.faa79f0a.js"><link rel="prefetch" href="/plana/assets/js/164.9c80b5bb.js"><link rel="prefetch" href="/plana/assets/js/165.7f9b0124.js"><link rel="prefetch" href="/plana/assets/js/166.36435978.js"><link rel="prefetch" href="/plana/assets/js/167.feea7028.js"><link rel="prefetch" href="/plana/assets/js/168.cc504d5f.js"><link rel="prefetch" href="/plana/assets/js/169.ec7d4b8a.js"><link rel="prefetch" href="/plana/assets/js/17.07c08387.js"><link rel="prefetch" href="/plana/assets/js/170.a8b4b58d.js"><link rel="prefetch" href="/plana/assets/js/171.2329fa88.js"><link rel="prefetch" href="/plana/assets/js/172.286ac28f.js"><link rel="prefetch" href="/plana/assets/js/173.a692852e.js"><link rel="prefetch" href="/plana/assets/js/174.a39922f0.js"><link rel="prefetch" href="/plana/assets/js/175.b47f1b23.js"><link rel="prefetch" href="/plana/assets/js/176.86486ead.js"><link rel="prefetch" href="/plana/assets/js/177.40f1c5b7.js"><link rel="prefetch" href="/plana/assets/js/178.7a9ca10d.js"><link rel="prefetch" href="/plana/assets/js/179.19051ac2.js"><link rel="prefetch" href="/plana/assets/js/18.e433f8d3.js"><link rel="prefetch" href="/plana/assets/js/180.57d0c928.js"><link rel="prefetch" href="/plana/assets/js/181.00da0f3d.js"><link rel="prefetch" href="/plana/assets/js/182.cadb79df.js"><link rel="prefetch" href="/plana/assets/js/183.8dd3881a.js"><link rel="prefetch" href="/plana/assets/js/184.1222a110.js"><link rel="prefetch" href="/plana/assets/js/185.7d9330c8.js"><link rel="prefetch" href="/plana/assets/js/186.d6ddbb60.js"><link rel="prefetch" href="/plana/assets/js/187.f19bfcc2.js"><link rel="prefetch" href="/plana/assets/js/188.b801053a.js"><link rel="prefetch" href="/plana/assets/js/189.9bf68bd8.js"><link rel="prefetch" href="/plana/assets/js/19.0f82fe28.js"><link rel="prefetch" href="/plana/assets/js/190.158c0b50.js"><link rel="prefetch" href="/plana/assets/js/191.cdca9aef.js"><link rel="prefetch" href="/plana/assets/js/192.84164400.js"><link rel="prefetch" href="/plana/assets/js/193.6fee8315.js"><link rel="prefetch" href="/plana/assets/js/194.646a3bc9.js"><link rel="prefetch" href="/plana/assets/js/195.f63862f4.js"><link rel="prefetch" href="/plana/assets/js/196.4b0d972c.js"><link rel="prefetch" href="/plana/assets/js/197.e706ce3c.js"><link rel="prefetch" href="/plana/assets/js/198.8b9720bf.js"><link rel="prefetch" href="/plana/assets/js/199.49a5e793.js"><link rel="prefetch" href="/plana/assets/js/20.619cb712.js"><link rel="prefetch" href="/plana/assets/js/200.ef546dd9.js"><link rel="prefetch" href="/plana/assets/js/201.479054ec.js"><link rel="prefetch" href="/plana/assets/js/202.0b3389ee.js"><link rel="prefetch" href="/plana/assets/js/203.22150890.js"><link rel="prefetch" href="/plana/assets/js/204.2dc71336.js"><link rel="prefetch" href="/plana/assets/js/205.e377c245.js"><link rel="prefetch" href="/plana/assets/js/206.1ace4feb.js"><link rel="prefetch" href="/plana/assets/js/207.323fa10a.js"><link rel="prefetch" href="/plana/assets/js/208.e353a6ec.js"><link rel="prefetch" href="/plana/assets/js/209.316ac6f0.js"><link rel="prefetch" href="/plana/assets/js/21.d91a849c.js"><link rel="prefetch" href="/plana/assets/js/210.d4f18535.js"><link rel="prefetch" href="/plana/assets/js/211.573c492b.js"><link rel="prefetch" href="/plana/assets/js/212.b2a16387.js"><link rel="prefetch" href="/plana/assets/js/213.c2fac0b1.js"><link rel="prefetch" href="/plana/assets/js/214.79b62576.js"><link rel="prefetch" href="/plana/assets/js/215.fe6c3e10.js"><link rel="prefetch" href="/plana/assets/js/216.18f410e2.js"><link rel="prefetch" href="/plana/assets/js/217.20c9e9eb.js"><link rel="prefetch" href="/plana/assets/js/218.a0eeeb7c.js"><link rel="prefetch" href="/plana/assets/js/219.b956aca7.js"><link rel="prefetch" href="/plana/assets/js/22.366fc766.js"><link rel="prefetch" href="/plana/assets/js/220.5ed5e277.js"><link rel="prefetch" href="/plana/assets/js/221.468f9087.js"><link rel="prefetch" href="/plana/assets/js/222.638dc5f6.js"><link rel="prefetch" href="/plana/assets/js/223.0fad689f.js"><link rel="prefetch" href="/plana/assets/js/224.61ad16fd.js"><link rel="prefetch" href="/plana/assets/js/225.91089e6c.js"><link rel="prefetch" href="/plana/assets/js/226.2f0d158a.js"><link rel="prefetch" href="/plana/assets/js/227.43288d9d.js"><link rel="prefetch" href="/plana/assets/js/228.4bff0625.js"><link rel="prefetch" href="/plana/assets/js/229.9c3666b2.js"><link rel="prefetch" href="/plana/assets/js/23.d2ecdcc9.js"><link rel="prefetch" href="/plana/assets/js/230.b52057f9.js"><link rel="prefetch" href="/plana/assets/js/231.cc0ed124.js"><link rel="prefetch" href="/plana/assets/js/232.9ad374c5.js"><link rel="prefetch" href="/plana/assets/js/233.d794c11f.js"><link rel="prefetch" href="/plana/assets/js/234.26ac8fbc.js"><link rel="prefetch" href="/plana/assets/js/235.41250663.js"><link rel="prefetch" href="/plana/assets/js/236.881374a2.js"><link rel="prefetch" href="/plana/assets/js/237.c7bd84e0.js"><link rel="prefetch" href="/plana/assets/js/238.98726af2.js"><link rel="prefetch" href="/plana/assets/js/239.9f11e102.js"><link rel="prefetch" href="/plana/assets/js/24.02b55c75.js"><link rel="prefetch" href="/plana/assets/js/240.a7cac4ef.js"><link rel="prefetch" href="/plana/assets/js/241.462a960b.js"><link rel="prefetch" href="/plana/assets/js/242.7cf42754.js"><link rel="prefetch" href="/plana/assets/js/243.b3d1619f.js"><link rel="prefetch" href="/plana/assets/js/244.40da516b.js"><link rel="prefetch" href="/plana/assets/js/245.ada0c168.js"><link rel="prefetch" href="/plana/assets/js/246.38614800.js"><link rel="prefetch" href="/plana/assets/js/247.491612a2.js"><link rel="prefetch" href="/plana/assets/js/248.23741832.js"><link rel="prefetch" href="/plana/assets/js/249.90624a3a.js"><link rel="prefetch" href="/plana/assets/js/25.96e9e495.js"><link rel="prefetch" href="/plana/assets/js/250.f5946779.js"><link rel="prefetch" href="/plana/assets/js/251.58091edf.js"><link rel="prefetch" href="/plana/assets/js/252.fbe32ae4.js"><link rel="prefetch" href="/plana/assets/js/253.1cdd8f1c.js"><link rel="prefetch" href="/plana/assets/js/254.651e7bc6.js"><link rel="prefetch" href="/plana/assets/js/255.58aaa830.js"><link rel="prefetch" href="/plana/assets/js/256.08653b0a.js"><link rel="prefetch" href="/plana/assets/js/257.18da3dda.js"><link rel="prefetch" href="/plana/assets/js/258.e639b138.js"><link rel="prefetch" href="/plana/assets/js/259.9a2ccdd8.js"><link rel="prefetch" href="/plana/assets/js/26.786f768e.js"><link rel="prefetch" href="/plana/assets/js/260.1ffec687.js"><link rel="prefetch" href="/plana/assets/js/261.6f007b8c.js"><link rel="prefetch" href="/plana/assets/js/262.eebd1210.js"><link rel="prefetch" href="/plana/assets/js/263.1672d254.js"><link rel="prefetch" href="/plana/assets/js/264.a786f2f0.js"><link rel="prefetch" href="/plana/assets/js/265.b08f361a.js"><link rel="prefetch" href="/plana/assets/js/266.6b9c1b18.js"><link rel="prefetch" href="/plana/assets/js/267.05341052.js"><link rel="prefetch" href="/plana/assets/js/268.2b47894a.js"><link rel="prefetch" href="/plana/assets/js/269.b00e1745.js"><link rel="prefetch" href="/plana/assets/js/27.d95cd926.js"><link rel="prefetch" href="/plana/assets/js/270.f09aa40d.js"><link rel="prefetch" href="/plana/assets/js/271.036eefbf.js"><link rel="prefetch" href="/plana/assets/js/272.685451a2.js"><link rel="prefetch" href="/plana/assets/js/273.489debcf.js"><link rel="prefetch" href="/plana/assets/js/274.3f824bc5.js"><link rel="prefetch" href="/plana/assets/js/275.d3661899.js"><link rel="prefetch" href="/plana/assets/js/276.0dd18e5e.js"><link rel="prefetch" href="/plana/assets/js/277.1ec17e71.js"><link rel="prefetch" href="/plana/assets/js/278.6379871f.js"><link rel="prefetch" href="/plana/assets/js/279.a0692e92.js"><link rel="prefetch" href="/plana/assets/js/28.c63f738d.js"><link rel="prefetch" href="/plana/assets/js/280.34932565.js"><link rel="prefetch" href="/plana/assets/js/281.ae742fd5.js"><link rel="prefetch" href="/plana/assets/js/282.715175d9.js"><link rel="prefetch" href="/plana/assets/js/283.9b6a3e34.js"><link rel="prefetch" href="/plana/assets/js/284.00628265.js"><link rel="prefetch" href="/plana/assets/js/285.3de0dd73.js"><link rel="prefetch" href="/plana/assets/js/286.6a2d6c2a.js"><link rel="prefetch" href="/plana/assets/js/287.74cdf243.js"><link rel="prefetch" href="/plana/assets/js/288.42fdbe73.js"><link rel="prefetch" href="/plana/assets/js/289.f4afe8dc.js"><link rel="prefetch" href="/plana/assets/js/29.84c2f6be.js"><link rel="prefetch" href="/plana/assets/js/290.6fad3c29.js"><link rel="prefetch" href="/plana/assets/js/291.b0ad0381.js"><link rel="prefetch" href="/plana/assets/js/292.888b58ac.js"><link rel="prefetch" href="/plana/assets/js/293.1ed605a6.js"><link rel="prefetch" href="/plana/assets/js/294.3af3dec3.js"><link rel="prefetch" href="/plana/assets/js/295.db08edcf.js"><link rel="prefetch" href="/plana/assets/js/296.e4837fb2.js"><link rel="prefetch" href="/plana/assets/js/297.25eb8cb6.js"><link rel="prefetch" href="/plana/assets/js/298.4948e1d0.js"><link rel="prefetch" href="/plana/assets/js/299.56ff4927.js"><link rel="prefetch" href="/plana/assets/js/3.27803fd3.js"><link rel="prefetch" href="/plana/assets/js/30.a9337659.js"><link rel="prefetch" href="/plana/assets/js/300.8dad7bd4.js"><link rel="prefetch" href="/plana/assets/js/301.1d0bd3b7.js"><link rel="prefetch" href="/plana/assets/js/302.24c7060b.js"><link rel="prefetch" href="/plana/assets/js/303.a4a7908d.js"><link rel="prefetch" href="/plana/assets/js/304.d5a32c16.js"><link rel="prefetch" href="/plana/assets/js/305.eb22a5e4.js"><link rel="prefetch" href="/plana/assets/js/306.cdaa56b9.js"><link rel="prefetch" href="/plana/assets/js/307.f7e38353.js"><link rel="prefetch" href="/plana/assets/js/308.3f3f49e6.js"><link rel="prefetch" href="/plana/assets/js/309.ba1c34b9.js"><link rel="prefetch" href="/plana/assets/js/31.f4ff74a7.js"><link rel="prefetch" href="/plana/assets/js/310.06e88629.js"><link rel="prefetch" href="/plana/assets/js/311.7cadacd8.js"><link rel="prefetch" href="/plana/assets/js/312.36004dd0.js"><link rel="prefetch" href="/plana/assets/js/313.efb51116.js"><link rel="prefetch" href="/plana/assets/js/314.55c74d14.js"><link rel="prefetch" href="/plana/assets/js/315.fc4d91f4.js"><link rel="prefetch" href="/plana/assets/js/316.dde0feb1.js"><link rel="prefetch" href="/plana/assets/js/317.ef59c7dd.js"><link rel="prefetch" href="/plana/assets/js/318.9c8514de.js"><link rel="prefetch" href="/plana/assets/js/319.e934bf23.js"><link rel="prefetch" href="/plana/assets/js/32.611da568.js"><link rel="prefetch" href="/plana/assets/js/320.2c3bf800.js"><link rel="prefetch" href="/plana/assets/js/321.2f166a58.js"><link rel="prefetch" href="/plana/assets/js/322.2727112d.js"><link rel="prefetch" href="/plana/assets/js/323.987dae09.js"><link rel="prefetch" href="/plana/assets/js/324.059197e5.js"><link rel="prefetch" href="/plana/assets/js/325.251603a9.js"><link rel="prefetch" href="/plana/assets/js/326.b9aa9786.js"><link rel="prefetch" href="/plana/assets/js/327.83df42f2.js"><link rel="prefetch" href="/plana/assets/js/328.437841b5.js"><link rel="prefetch" href="/plana/assets/js/329.4705178f.js"><link rel="prefetch" href="/plana/assets/js/33.04179be5.js"><link rel="prefetch" href="/plana/assets/js/330.7fefbd39.js"><link rel="prefetch" href="/plana/assets/js/331.324b88a4.js"><link rel="prefetch" href="/plana/assets/js/332.9dbc0a0f.js"><link rel="prefetch" href="/plana/assets/js/333.a9f4ba89.js"><link rel="prefetch" href="/plana/assets/js/334.bfc521ff.js"><link rel="prefetch" href="/plana/assets/js/335.ea772c69.js"><link rel="prefetch" href="/plana/assets/js/336.3c139a73.js"><link rel="prefetch" href="/plana/assets/js/337.4b7b5285.js"><link rel="prefetch" href="/plana/assets/js/338.40b3bfdb.js"><link rel="prefetch" href="/plana/assets/js/339.bf0c2419.js"><link rel="prefetch" href="/plana/assets/js/34.7d7532c6.js"><link rel="prefetch" href="/plana/assets/js/340.9ceb2f7a.js"><link rel="prefetch" href="/plana/assets/js/341.bc48efb9.js"><link rel="prefetch" href="/plana/assets/js/342.75077914.js"><link rel="prefetch" href="/plana/assets/js/343.efda7d56.js"><link rel="prefetch" href="/plana/assets/js/344.31c0f3c6.js"><link rel="prefetch" href="/plana/assets/js/345.7fb06b95.js"><link rel="prefetch" href="/plana/assets/js/346.55ccf355.js"><link rel="prefetch" href="/plana/assets/js/347.98aa9eab.js"><link rel="prefetch" href="/plana/assets/js/348.878dac49.js"><link rel="prefetch" href="/plana/assets/js/349.878acfca.js"><link rel="prefetch" href="/plana/assets/js/35.a56a078a.js"><link rel="prefetch" href="/plana/assets/js/350.67d85dec.js"><link rel="prefetch" href="/plana/assets/js/351.fe864f55.js"><link rel="prefetch" href="/plana/assets/js/352.0140a20d.js"><link rel="prefetch" href="/plana/assets/js/353.1a2bdf26.js"><link rel="prefetch" href="/plana/assets/js/354.e698b263.js"><link rel="prefetch" href="/plana/assets/js/355.69178048.js"><link rel="prefetch" href="/plana/assets/js/356.13571020.js"><link rel="prefetch" href="/plana/assets/js/357.666a6e4e.js"><link rel="prefetch" href="/plana/assets/js/358.3a859aae.js"><link rel="prefetch" href="/plana/assets/js/359.e6291586.js"><link rel="prefetch" href="/plana/assets/js/36.6b2c1c06.js"><link rel="prefetch" href="/plana/assets/js/360.553be648.js"><link rel="prefetch" href="/plana/assets/js/361.f674d762.js"><link rel="prefetch" href="/plana/assets/js/362.41696f0b.js"><link rel="prefetch" href="/plana/assets/js/363.db6b18e5.js"><link rel="prefetch" href="/plana/assets/js/364.f4ef8d66.js"><link rel="prefetch" href="/plana/assets/js/365.060bb2cd.js"><link rel="prefetch" href="/plana/assets/js/366.af8be9cf.js"><link rel="prefetch" href="/plana/assets/js/367.89b9bd1a.js"><link rel="prefetch" href="/plana/assets/js/368.4a0db9f9.js"><link rel="prefetch" href="/plana/assets/js/369.0f137c05.js"><link rel="prefetch" href="/plana/assets/js/37.a372e2ff.js"><link rel="prefetch" href="/plana/assets/js/370.d0503cfb.js"><link rel="prefetch" href="/plana/assets/js/371.a5a61f6c.js"><link rel="prefetch" href="/plana/assets/js/372.a8beeec6.js"><link rel="prefetch" href="/plana/assets/js/373.52486327.js"><link rel="prefetch" href="/plana/assets/js/374.becb79ef.js"><link rel="prefetch" href="/plana/assets/js/375.adbe845a.js"><link rel="prefetch" href="/plana/assets/js/376.0b725de7.js"><link rel="prefetch" href="/plana/assets/js/377.6d0755e8.js"><link rel="prefetch" href="/plana/assets/js/378.9899dca3.js"><link rel="prefetch" href="/plana/assets/js/379.8567246b.js"><link rel="prefetch" href="/plana/assets/js/38.bf139dae.js"><link rel="prefetch" href="/plana/assets/js/380.fff3aeb0.js"><link rel="prefetch" href="/plana/assets/js/381.5d8ddb4d.js"><link rel="prefetch" href="/plana/assets/js/382.ebb79c48.js"><link rel="prefetch" href="/plana/assets/js/383.b1d8b5be.js"><link rel="prefetch" href="/plana/assets/js/384.b8ef0439.js"><link rel="prefetch" href="/plana/assets/js/385.274ad089.js"><link rel="prefetch" href="/plana/assets/js/386.8dc07401.js"><link rel="prefetch" href="/plana/assets/js/387.aea18e98.js"><link rel="prefetch" href="/plana/assets/js/388.1ef06a0b.js"><link rel="prefetch" href="/plana/assets/js/389.9d65f18d.js"><link rel="prefetch" href="/plana/assets/js/39.5a4f8e59.js"><link rel="prefetch" href="/plana/assets/js/390.6bd12dc7.js"><link rel="prefetch" href="/plana/assets/js/391.6ef66911.js"><link rel="prefetch" href="/plana/assets/js/392.ffba56bb.js"><link rel="prefetch" href="/plana/assets/js/393.a5fc8fba.js"><link rel="prefetch" href="/plana/assets/js/394.6ab7521b.js"><link rel="prefetch" href="/plana/assets/js/395.3ab7f171.js"><link rel="prefetch" href="/plana/assets/js/396.0791500c.js"><link rel="prefetch" href="/plana/assets/js/397.28bf46c8.js"><link rel="prefetch" href="/plana/assets/js/398.7807db8d.js"><link rel="prefetch" href="/plana/assets/js/399.4d403b1b.js"><link rel="prefetch" href="/plana/assets/js/4.6af04a85.js"><link rel="prefetch" href="/plana/assets/js/40.43e4b38f.js"><link rel="prefetch" href="/plana/assets/js/400.c888a05f.js"><link rel="prefetch" href="/plana/assets/js/401.6dfdc401.js"><link rel="prefetch" href="/plana/assets/js/402.2836e580.js"><link rel="prefetch" href="/plana/assets/js/403.a8ec3c75.js"><link rel="prefetch" href="/plana/assets/js/404.5858ee05.js"><link rel="prefetch" href="/plana/assets/js/405.4fd5cbce.js"><link rel="prefetch" href="/plana/assets/js/406.059c34fc.js"><link rel="prefetch" href="/plana/assets/js/407.1991324f.js"><link rel="prefetch" href="/plana/assets/js/408.57f13ab2.js"><link rel="prefetch" href="/plana/assets/js/409.b3fdbf19.js"><link rel="prefetch" href="/plana/assets/js/41.baf41ad2.js"><link rel="prefetch" href="/plana/assets/js/410.1c66b59b.js"><link rel="prefetch" href="/plana/assets/js/411.89daa103.js"><link rel="prefetch" href="/plana/assets/js/412.5fd17d05.js"><link rel="prefetch" href="/plana/assets/js/413.67df2b20.js"><link rel="prefetch" href="/plana/assets/js/414.7c1feaab.js"><link rel="prefetch" href="/plana/assets/js/415.e07db45d.js"><link rel="prefetch" href="/plana/assets/js/416.fe7e2c62.js"><link rel="prefetch" href="/plana/assets/js/417.c9f94e9c.js"><link rel="prefetch" href="/plana/assets/js/418.18704cfc.js"><link rel="prefetch" href="/plana/assets/js/419.9f113e64.js"><link rel="prefetch" href="/plana/assets/js/42.f2884796.js"><link rel="prefetch" href="/plana/assets/js/420.2a5f3a3f.js"><link rel="prefetch" href="/plana/assets/js/421.1b110d49.js"><link rel="prefetch" href="/plana/assets/js/422.b836f5a4.js"><link rel="prefetch" href="/plana/assets/js/423.9fa437af.js"><link rel="prefetch" href="/plana/assets/js/424.0fc0a623.js"><link rel="prefetch" href="/plana/assets/js/425.4bee6afc.js"><link rel="prefetch" href="/plana/assets/js/426.036d5a1b.js"><link rel="prefetch" href="/plana/assets/js/427.f2a1aa48.js"><link rel="prefetch" href="/plana/assets/js/428.fc22796c.js"><link rel="prefetch" href="/plana/assets/js/429.b6acfba5.js"><link rel="prefetch" href="/plana/assets/js/43.7aa39e52.js"><link rel="prefetch" href="/plana/assets/js/430.ed97aa43.js"><link rel="prefetch" href="/plana/assets/js/431.2fc0d4e3.js"><link rel="prefetch" href="/plana/assets/js/432.43115b63.js"><link rel="prefetch" href="/plana/assets/js/433.a1c3b83a.js"><link rel="prefetch" href="/plana/assets/js/434.ee152248.js"><link rel="prefetch" href="/plana/assets/js/435.24976c8a.js"><link rel="prefetch" href="/plana/assets/js/436.59dd1ab1.js"><link rel="prefetch" href="/plana/assets/js/437.50136991.js"><link rel="prefetch" href="/plana/assets/js/438.5eb6bf82.js"><link rel="prefetch" href="/plana/assets/js/439.9e310ae5.js"><link rel="prefetch" href="/plana/assets/js/44.ea8da77b.js"><link rel="prefetch" href="/plana/assets/js/440.2457f927.js"><link rel="prefetch" href="/plana/assets/js/441.fbc13ad6.js"><link rel="prefetch" href="/plana/assets/js/442.d130c4b3.js"><link rel="prefetch" href="/plana/assets/js/443.1f900823.js"><link rel="prefetch" href="/plana/assets/js/444.3834d598.js"><link rel="prefetch" href="/plana/assets/js/445.16932093.js"><link rel="prefetch" href="/plana/assets/js/446.24711545.js"><link rel="prefetch" href="/plana/assets/js/447.568b3f96.js"><link rel="prefetch" href="/plana/assets/js/448.8883fa0d.js"><link rel="prefetch" href="/plana/assets/js/449.f6184633.js"><link rel="prefetch" href="/plana/assets/js/45.73a9f625.js"><link rel="prefetch" href="/plana/assets/js/450.a996511c.js"><link rel="prefetch" href="/plana/assets/js/451.1b1843f7.js"><link rel="prefetch" href="/plana/assets/js/452.0be6db8b.js"><link rel="prefetch" href="/plana/assets/js/453.2c9eca27.js"><link rel="prefetch" href="/plana/assets/js/454.43d6b922.js"><link rel="prefetch" href="/plana/assets/js/455.798dc8d2.js"><link rel="prefetch" href="/plana/assets/js/456.5294aa61.js"><link rel="prefetch" href="/plana/assets/js/457.582336be.js"><link rel="prefetch" href="/plana/assets/js/458.3ae86239.js"><link rel="prefetch" href="/plana/assets/js/459.17fe935e.js"><link rel="prefetch" href="/plana/assets/js/46.6c8e3280.js"><link rel="prefetch" href="/plana/assets/js/460.e3ca3d89.js"><link rel="prefetch" href="/plana/assets/js/461.9f892ebc.js"><link rel="prefetch" href="/plana/assets/js/462.57d0ad29.js"><link rel="prefetch" href="/plana/assets/js/463.a1965841.js"><link rel="prefetch" href="/plana/assets/js/464.d0da0b56.js"><link rel="prefetch" href="/plana/assets/js/465.6cb0dd50.js"><link rel="prefetch" href="/plana/assets/js/467.9c04d6bf.js"><link rel="prefetch" href="/plana/assets/js/468.b91655c9.js"><link rel="prefetch" href="/plana/assets/js/469.e4727b4f.js"><link rel="prefetch" href="/plana/assets/js/47.3909e74a.js"><link rel="prefetch" href="/plana/assets/js/470.b11beb41.js"><link rel="prefetch" href="/plana/assets/js/471.4753cb89.js"><link rel="prefetch" href="/plana/assets/js/472.29077ff8.js"><link rel="prefetch" href="/plana/assets/js/473.a653331c.js"><link rel="prefetch" href="/plana/assets/js/474.2a8fae88.js"><link rel="prefetch" href="/plana/assets/js/475.9b78390f.js"><link rel="prefetch" href="/plana/assets/js/476.9e13c339.js"><link rel="prefetch" href="/plana/assets/js/477.05a2179e.js"><link rel="prefetch" href="/plana/assets/js/478.9c4f06c9.js"><link rel="prefetch" href="/plana/assets/js/479.559e2b93.js"><link rel="prefetch" href="/plana/assets/js/48.be057863.js"><link rel="prefetch" href="/plana/assets/js/480.ec41e7ce.js"><link rel="prefetch" href="/plana/assets/js/481.113c6aa3.js"><link rel="prefetch" href="/plana/assets/js/482.40e20309.js"><link rel="prefetch" href="/plana/assets/js/483.689e3d97.js"><link rel="prefetch" href="/plana/assets/js/484.069ebf35.js"><link rel="prefetch" href="/plana/assets/js/485.9e7bd20f.js"><link rel="prefetch" href="/plana/assets/js/486.c163809d.js"><link rel="prefetch" href="/plana/assets/js/487.acdd4863.js"><link rel="prefetch" href="/plana/assets/js/488.6075f8e7.js"><link rel="prefetch" href="/plana/assets/js/489.77207a01.js"><link rel="prefetch" href="/plana/assets/js/49.64cd900d.js"><link rel="prefetch" href="/plana/assets/js/490.2bb176f4.js"><link rel="prefetch" href="/plana/assets/js/491.07e739a2.js"><link rel="prefetch" href="/plana/assets/js/492.e07a5eee.js"><link rel="prefetch" href="/plana/assets/js/493.333ffb97.js"><link rel="prefetch" href="/plana/assets/js/494.ef208677.js"><link rel="prefetch" href="/plana/assets/js/495.a1f2d8cb.js"><link rel="prefetch" href="/plana/assets/js/496.6f6a823a.js"><link rel="prefetch" href="/plana/assets/js/497.c44b60d1.js"><link rel="prefetch" href="/plana/assets/js/498.2b898143.js"><link rel="prefetch" href="/plana/assets/js/499.366c11df.js"><link rel="prefetch" href="/plana/assets/js/5.6d71262c.js"><link rel="prefetch" href="/plana/assets/js/50.b2d0e32a.js"><link rel="prefetch" href="/plana/assets/js/500.c2769d0d.js"><link rel="prefetch" href="/plana/assets/js/501.5db31a91.js"><link rel="prefetch" href="/plana/assets/js/502.6550f71c.js"><link rel="prefetch" href="/plana/assets/js/503.bcac8e8e.js"><link rel="prefetch" href="/plana/assets/js/504.defc6a0c.js"><link rel="prefetch" href="/plana/assets/js/505.6db6e3e2.js"><link rel="prefetch" href="/plana/assets/js/506.1be6db54.js"><link rel="prefetch" href="/plana/assets/js/507.e3063e28.js"><link rel="prefetch" href="/plana/assets/js/508.9fcc5bc1.js"><link rel="prefetch" href="/plana/assets/js/509.69b407c9.js"><link rel="prefetch" href="/plana/assets/js/51.98c6fcd6.js"><link rel="prefetch" href="/plana/assets/js/510.78cc9b58.js"><link rel="prefetch" href="/plana/assets/js/511.890e750c.js"><link rel="prefetch" href="/plana/assets/js/512.54f5237b.js"><link rel="prefetch" href="/plana/assets/js/513.71e81daf.js"><link rel="prefetch" href="/plana/assets/js/514.43eff2c4.js"><link rel="prefetch" href="/plana/assets/js/515.267a0ebd.js"><link rel="prefetch" href="/plana/assets/js/516.619a751e.js"><link rel="prefetch" href="/plana/assets/js/517.7e7b4f57.js"><link rel="prefetch" href="/plana/assets/js/518.4b5b069f.js"><link rel="prefetch" href="/plana/assets/js/519.cecd2dba.js"><link rel="prefetch" href="/plana/assets/js/52.51175da9.js"><link rel="prefetch" href="/plana/assets/js/520.d61eaea1.js"><link rel="prefetch" href="/plana/assets/js/521.1bdd256d.js"><link rel="prefetch" href="/plana/assets/js/522.9eb89cb1.js"><link rel="prefetch" href="/plana/assets/js/523.c21b0f67.js"><link rel="prefetch" href="/plana/assets/js/524.e8e2b891.js"><link rel="prefetch" href="/plana/assets/js/525.5d527982.js"><link rel="prefetch" href="/plana/assets/js/526.06ac5112.js"><link rel="prefetch" href="/plana/assets/js/527.9fb3036e.js"><link rel="prefetch" href="/plana/assets/js/528.fc9e2c1b.js"><link rel="prefetch" href="/plana/assets/js/529.9334c6ad.js"><link rel="prefetch" href="/plana/assets/js/53.4db53b65.js"><link rel="prefetch" href="/plana/assets/js/530.d069e448.js"><link rel="prefetch" href="/plana/assets/js/531.6b5d9a6c.js"><link rel="prefetch" href="/plana/assets/js/532.b288face.js"><link rel="prefetch" href="/plana/assets/js/533.dd36700a.js"><link rel="prefetch" href="/plana/assets/js/534.430379e3.js"><link rel="prefetch" href="/plana/assets/js/535.5b1ec919.js"><link rel="prefetch" href="/plana/assets/js/536.62d48a69.js"><link rel="prefetch" href="/plana/assets/js/537.e4ba4cc0.js"><link rel="prefetch" href="/plana/assets/js/538.2ba0b7b5.js"><link rel="prefetch" href="/plana/assets/js/539.44d94e0a.js"><link rel="prefetch" href="/plana/assets/js/54.4ecc183c.js"><link rel="prefetch" href="/plana/assets/js/540.58126542.js"><link rel="prefetch" href="/plana/assets/js/541.8a2719d4.js"><link rel="prefetch" href="/plana/assets/js/542.63823f7d.js"><link rel="prefetch" href="/plana/assets/js/543.fd601531.js"><link rel="prefetch" href="/plana/assets/js/544.c2d41a95.js"><link rel="prefetch" href="/plana/assets/js/545.c0f15057.js"><link rel="prefetch" href="/plana/assets/js/546.752d4411.js"><link rel="prefetch" href="/plana/assets/js/547.05b54675.js"><link rel="prefetch" href="/plana/assets/js/548.9c781add.js"><link rel="prefetch" href="/plana/assets/js/549.f1400ef4.js"><link rel="prefetch" href="/plana/assets/js/55.eea26142.js"><link rel="prefetch" href="/plana/assets/js/550.1c4c183f.js"><link rel="prefetch" href="/plana/assets/js/551.a6ea4558.js"><link rel="prefetch" href="/plana/assets/js/552.0d04b29e.js"><link rel="prefetch" href="/plana/assets/js/553.5c2ddf4f.js"><link rel="prefetch" href="/plana/assets/js/554.0a16293a.js"><link rel="prefetch" href="/plana/assets/js/555.015fced4.js"><link rel="prefetch" href="/plana/assets/js/556.6a698949.js"><link rel="prefetch" href="/plana/assets/js/557.fee4398a.js"><link rel="prefetch" href="/plana/assets/js/558.20023b16.js"><link rel="prefetch" href="/plana/assets/js/559.fd760ca6.js"><link rel="prefetch" href="/plana/assets/js/56.8bddb4ea.js"><link rel="prefetch" href="/plana/assets/js/560.27c09de9.js"><link rel="prefetch" href="/plana/assets/js/561.1b28b647.js"><link rel="prefetch" href="/plana/assets/js/562.de1b62da.js"><link rel="prefetch" href="/plana/assets/js/563.3e063e33.js"><link rel="prefetch" href="/plana/assets/js/564.fbdb4383.js"><link rel="prefetch" href="/plana/assets/js/565.6ac66720.js"><link rel="prefetch" href="/plana/assets/js/566.00ccbe3d.js"><link rel="prefetch" href="/plana/assets/js/567.822ff786.js"><link rel="prefetch" href="/plana/assets/js/568.2ebcf522.js"><link rel="prefetch" href="/plana/assets/js/569.ee2e3485.js"><link rel="prefetch" href="/plana/assets/js/57.ff655a80.js"><link rel="prefetch" href="/plana/assets/js/570.a9314e9d.js"><link rel="prefetch" href="/plana/assets/js/571.af242a14.js"><link rel="prefetch" href="/plana/assets/js/572.dff86d44.js"><link rel="prefetch" href="/plana/assets/js/573.060ed316.js"><link rel="prefetch" href="/plana/assets/js/574.ecea29a4.js"><link rel="prefetch" href="/plana/assets/js/575.a526b6e0.js"><link rel="prefetch" href="/plana/assets/js/576.1a856efd.js"><link rel="prefetch" href="/plana/assets/js/577.340a24d3.js"><link rel="prefetch" href="/plana/assets/js/578.1e87e5de.js"><link rel="prefetch" href="/plana/assets/js/579.ba400d0d.js"><link rel="prefetch" href="/plana/assets/js/58.6d7395ff.js"><link rel="prefetch" href="/plana/assets/js/580.8470a6ab.js"><link rel="prefetch" href="/plana/assets/js/581.24b8fa46.js"><link rel="prefetch" href="/plana/assets/js/582.11991e75.js"><link rel="prefetch" href="/plana/assets/js/583.1af0e850.js"><link rel="prefetch" href="/plana/assets/js/584.b671635d.js"><link rel="prefetch" href="/plana/assets/js/585.5ec10dae.js"><link rel="prefetch" href="/plana/assets/js/586.cf868939.js"><link rel="prefetch" href="/plana/assets/js/587.e937242b.js"><link rel="prefetch" href="/plana/assets/js/588.9993b844.js"><link rel="prefetch" href="/plana/assets/js/589.040b58f8.js"><link rel="prefetch" href="/plana/assets/js/59.d91c7a50.js"><link rel="prefetch" href="/plana/assets/js/590.7f347f61.js"><link rel="prefetch" href="/plana/assets/js/591.3acb8a8d.js"><link rel="prefetch" href="/plana/assets/js/592.c0fecc8a.js"><link rel="prefetch" href="/plana/assets/js/593.0ee76323.js"><link rel="prefetch" href="/plana/assets/js/594.7e15bb85.js"><link rel="prefetch" href="/plana/assets/js/595.b5540278.js"><link rel="prefetch" href="/plana/assets/js/596.2996c0fa.js"><link rel="prefetch" href="/plana/assets/js/597.3a3b9a07.js"><link rel="prefetch" href="/plana/assets/js/598.510c6ec5.js"><link rel="prefetch" href="/plana/assets/js/599.f7cd0ab9.js"><link rel="prefetch" href="/plana/assets/js/6.23e42cf9.js"><link rel="prefetch" href="/plana/assets/js/60.12c2a97e.js"><link rel="prefetch" href="/plana/assets/js/600.3a511d88.js"><link rel="prefetch" href="/plana/assets/js/601.1620fe4a.js"><link rel="prefetch" href="/plana/assets/js/602.92820a4e.js"><link rel="prefetch" href="/plana/assets/js/603.fa3b8f68.js"><link rel="prefetch" href="/plana/assets/js/604.a75f5d11.js"><link rel="prefetch" href="/plana/assets/js/605.6e16e44e.js"><link rel="prefetch" href="/plana/assets/js/606.3ca54f7c.js"><link rel="prefetch" href="/plana/assets/js/607.ed2521fd.js"><link rel="prefetch" href="/plana/assets/js/608.83c6a7b7.js"><link rel="prefetch" href="/plana/assets/js/609.cc5d05f6.js"><link rel="prefetch" href="/plana/assets/js/61.57554021.js"><link rel="prefetch" href="/plana/assets/js/610.e114869f.js"><link rel="prefetch" href="/plana/assets/js/611.4dfe17f1.js"><link rel="prefetch" href="/plana/assets/js/612.e9e7cdd9.js"><link rel="prefetch" href="/plana/assets/js/613.52fab004.js"><link rel="prefetch" href="/plana/assets/js/614.03e68635.js"><link rel="prefetch" href="/plana/assets/js/615.b5b202c3.js"><link rel="prefetch" href="/plana/assets/js/616.55d3ec0f.js"><link rel="prefetch" href="/plana/assets/js/617.caa80506.js"><link rel="prefetch" href="/plana/assets/js/618.97c71cdd.js"><link rel="prefetch" href="/plana/assets/js/619.506d3336.js"><link rel="prefetch" href="/plana/assets/js/62.c471c2b6.js"><link rel="prefetch" href="/plana/assets/js/620.d265d33b.js"><link rel="prefetch" href="/plana/assets/js/621.c7274a04.js"><link rel="prefetch" href="/plana/assets/js/622.78f88193.js"><link rel="prefetch" href="/plana/assets/js/623.460ecfe4.js"><link rel="prefetch" href="/plana/assets/js/624.af5db8f4.js"><link rel="prefetch" href="/plana/assets/js/625.b8b56400.js"><link rel="prefetch" href="/plana/assets/js/626.5f935139.js"><link rel="prefetch" href="/plana/assets/js/627.5eae5139.js"><link rel="prefetch" href="/plana/assets/js/628.b76c4230.js"><link rel="prefetch" href="/plana/assets/js/629.b5df5447.js"><link rel="prefetch" href="/plana/assets/js/63.a859b22b.js"><link rel="prefetch" href="/plana/assets/js/630.b4353e1e.js"><link rel="prefetch" href="/plana/assets/js/631.f52d250f.js"><link rel="prefetch" href="/plana/assets/js/632.fb3cd435.js"><link rel="prefetch" href="/plana/assets/js/633.d11743c5.js"><link rel="prefetch" href="/plana/assets/js/634.f274f0f2.js"><link rel="prefetch" href="/plana/assets/js/635.e4b93eee.js"><link rel="prefetch" href="/plana/assets/js/636.ddfe36dc.js"><link rel="prefetch" href="/plana/assets/js/637.773dfbf9.js"><link rel="prefetch" href="/plana/assets/js/638.5d3283ef.js"><link rel="prefetch" href="/plana/assets/js/639.1182aa0e.js"><link rel="prefetch" href="/plana/assets/js/64.3933d035.js"><link rel="prefetch" href="/plana/assets/js/640.fc30215e.js"><link rel="prefetch" href="/plana/assets/js/641.8fa04f8c.js"><link rel="prefetch" href="/plana/assets/js/642.9adc9013.js"><link rel="prefetch" href="/plana/assets/js/643.c553c77d.js"><link rel="prefetch" href="/plana/assets/js/644.f45f12bc.js"><link rel="prefetch" href="/plana/assets/js/645.45551213.js"><link rel="prefetch" href="/plana/assets/js/646.20f8455d.js"><link rel="prefetch" href="/plana/assets/js/647.f83d8512.js"><link rel="prefetch" href="/plana/assets/js/648.d2116c6d.js"><link rel="prefetch" href="/plana/assets/js/649.7c63bf5a.js"><link rel="prefetch" href="/plana/assets/js/65.c73421f0.js"><link rel="prefetch" href="/plana/assets/js/650.a8d4d68c.js"><link rel="prefetch" href="/plana/assets/js/651.660dc950.js"><link rel="prefetch" href="/plana/assets/js/652.e4a8d299.js"><link rel="prefetch" href="/plana/assets/js/653.d5cb1829.js"><link rel="prefetch" href="/plana/assets/js/654.06347c17.js"><link rel="prefetch" href="/plana/assets/js/655.1407708a.js"><link rel="prefetch" href="/plana/assets/js/656.c8c6bc8b.js"><link rel="prefetch" href="/plana/assets/js/657.5bfffe54.js"><link rel="prefetch" href="/plana/assets/js/658.548e92c7.js"><link rel="prefetch" href="/plana/assets/js/659.e6f86d89.js"><link rel="prefetch" href="/plana/assets/js/66.db88a898.js"><link rel="prefetch" href="/plana/assets/js/660.68b4f9c1.js"><link rel="prefetch" href="/plana/assets/js/661.7c1843eb.js"><link rel="prefetch" href="/plana/assets/js/662.fd5c9c14.js"><link rel="prefetch" href="/plana/assets/js/663.2a29079b.js"><link rel="prefetch" href="/plana/assets/js/664.f7e273fb.js"><link rel="prefetch" href="/plana/assets/js/665.92739f4f.js"><link rel="prefetch" href="/plana/assets/js/666.c9dfc4da.js"><link rel="prefetch" href="/plana/assets/js/667.e4e37653.js"><link rel="prefetch" href="/plana/assets/js/668.753f6377.js"><link rel="prefetch" href="/plana/assets/js/669.26bfae22.js"><link rel="prefetch" href="/plana/assets/js/67.ad91902f.js"><link rel="prefetch" href="/plana/assets/js/670.a70329fc.js"><link rel="prefetch" href="/plana/assets/js/671.11637c8c.js"><link rel="prefetch" href="/plana/assets/js/672.9a3410bf.js"><link rel="prefetch" href="/plana/assets/js/673.5f4041b7.js"><link rel="prefetch" href="/plana/assets/js/674.7a725878.js"><link rel="prefetch" href="/plana/assets/js/675.d55427e9.js"><link rel="prefetch" href="/plana/assets/js/676.eb15c05a.js"><link rel="prefetch" href="/plana/assets/js/677.98c18ede.js"><link rel="prefetch" href="/plana/assets/js/678.db86b061.js"><link rel="prefetch" href="/plana/assets/js/679.972243d8.js"><link rel="prefetch" href="/plana/assets/js/68.3e6dcf8f.js"><link rel="prefetch" href="/plana/assets/js/680.d9e2eba1.js"><link rel="prefetch" href="/plana/assets/js/681.8e0783ae.js"><link rel="prefetch" href="/plana/assets/js/682.a0c2e943.js"><link rel="prefetch" href="/plana/assets/js/683.d9a0e0b6.js"><link rel="prefetch" href="/plana/assets/js/684.19b16b09.js"><link rel="prefetch" href="/plana/assets/js/685.1dfde878.js"><link rel="prefetch" href="/plana/assets/js/686.5ebd864b.js"><link rel="prefetch" href="/plana/assets/js/687.9d3c3ee0.js"><link rel="prefetch" href="/plana/assets/js/688.7a8d52a4.js"><link rel="prefetch" href="/plana/assets/js/689.43733f87.js"><link rel="prefetch" href="/plana/assets/js/69.0c93e68b.js"><link rel="prefetch" href="/plana/assets/js/690.b3cc0545.js"><link rel="prefetch" href="/plana/assets/js/691.f0c9f432.js"><link rel="prefetch" href="/plana/assets/js/692.fe5d277f.js"><link rel="prefetch" href="/plana/assets/js/693.f2a5bc91.js"><link rel="prefetch" href="/plana/assets/js/694.0afc8ee3.js"><link rel="prefetch" href="/plana/assets/js/695.02d143c2.js"><link rel="prefetch" href="/plana/assets/js/696.fc35e844.js"><link rel="prefetch" href="/plana/assets/js/697.59baff52.js"><link rel="prefetch" href="/plana/assets/js/698.32395aca.js"><link rel="prefetch" href="/plana/assets/js/699.49a455e0.js"><link rel="prefetch" href="/plana/assets/js/7.4d84b003.js"><link rel="prefetch" href="/plana/assets/js/70.02b035df.js"><link rel="prefetch" href="/plana/assets/js/71.50c27702.js"><link rel="prefetch" href="/plana/assets/js/72.d0b51e9d.js"><link rel="prefetch" href="/plana/assets/js/73.88fbc437.js"><link rel="prefetch" href="/plana/assets/js/74.4323b154.js"><link rel="prefetch" href="/plana/assets/js/75.c07fede3.js"><link rel="prefetch" href="/plana/assets/js/76.d17b982e.js"><link rel="prefetch" href="/plana/assets/js/77.2c2c823d.js"><link rel="prefetch" href="/plana/assets/js/78.6339cdb8.js"><link rel="prefetch" href="/plana/assets/js/79.08610500.js"><link rel="prefetch" href="/plana/assets/js/8.28fd7fea.js"><link rel="prefetch" href="/plana/assets/js/80.fd045bb2.js"><link rel="prefetch" href="/plana/assets/js/81.c563629a.js"><link rel="prefetch" href="/plana/assets/js/82.f186782c.js"><link rel="prefetch" href="/plana/assets/js/83.5b829c7f.js"><link rel="prefetch" href="/plana/assets/js/84.0edd8a25.js"><link rel="prefetch" href="/plana/assets/js/85.cb1c8ff9.js"><link rel="prefetch" href="/plana/assets/js/86.6e0b2f9b.js"><link rel="prefetch" href="/plana/assets/js/87.36b6b2f5.js"><link rel="prefetch" href="/plana/assets/js/88.a23a2afa.js"><link rel="prefetch" href="/plana/assets/js/89.765b2b9d.js"><link rel="prefetch" href="/plana/assets/js/9.59274a6f.js"><link rel="prefetch" href="/plana/assets/js/90.a62aad9b.js"><link rel="prefetch" href="/plana/assets/js/91.96d9b5fa.js"><link rel="prefetch" href="/plana/assets/js/92.b7f7e048.js"><link rel="prefetch" href="/plana/assets/js/93.c7a06bfe.js"><link rel="prefetch" href="/plana/assets/js/94.097b631a.js"><link rel="prefetch" href="/plana/assets/js/95.cdb222d4.js"><link rel="prefetch" href="/plana/assets/js/96.5a864796.js"><link rel="prefetch" href="/plana/assets/js/97.7478b98b.js"><link rel="prefetch" href="/plana/assets/js/98.c9fff4ca.js"><link rel="prefetch" href="/plana/assets/js/99.1e106589.js">
    <link rel="stylesheet" href="/plana/assets/css/0.styles.e9cba6b3.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/plana/" class="home-link router-link-active"><!----> <span class="site-name">Plana(方案A)</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Service Java(者)" class="dropdown-title"><span class="title">Service Java(者)</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch1-core-oop/" class="nav-link">
  Core Oop
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch2-utils-crud/" class="nav-link">
  Utils Crud
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch3-web-springboot/" class="nav-link">
  Web Springboot
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch4-micro-cloud/" class="nav-link">
  Micro Cloud
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch5-devops-native/" class="nav-link">
  Devops Native
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch6-platform-faas/" class="nav-link">
  Platform Faas
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch7-perf-jvm/" class="nav-link">
  Perf Jvm
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch8-arch-pmp/" class="nav-link">
  Arch Pmp
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch9-code-interview/" class="nav-link">
  Code Interview
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Ui Javascript(皆)" class="dropdown-title"><span class="title">Ui Javascript(皆)</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch1-core-prototype/" class="nav-link">
  Core Prototype
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch2-web3-html5/" class="nav-link">
  Web3 Html5
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch3-component-mvc/" class="nav-link">
  Component Mvc
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch4-service-nodejs/" class="nav-link">
  Service Nodejs
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/" class="nav-link router-link-active">
  Devops Scaffold
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch6-hybrid-webapp/" class="nav-link">
  Hybrid Webapp
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch7-visualizing-chart/" class="nav-link">
  Visualizing Chart
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch8-interaction-gl/" class="nav-link">
  Interaction Gl
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch9-code-interview/" class="nav-link">
  Code Interview
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Data Python(数)" class="dropdown-title"><span class="title">Data Python(数)</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch1-core-pymath/" class="nav-link">
  Core Pymath
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch2-utils-dataset/" class="nav-link">
  Utils Dataset
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch3-service-flask/" class="nav-link">
  Service Flask
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch4-bigdata-analysis/" class="nav-link">
  Bigdata Analysis
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch5-devops-auto/" class="nav-link">
  Devops Auto
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch6-ai-machine/" class="nav-link">
  Ai Machine
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch7-visualizing-gui/" class="nav-link">
  Visualizing Gui
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch8-control-embed/" class="nav-link">
  Control Embed
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch9-code-interview/" class="nav-link">
  Code Interview
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="关于" class="dropdown-title"><span class="title">关于</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://github.com/luo0412" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Github
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="/plana/about-me.html" class="nav-link">
  关于我
</a></li><li class="dropdown-item"><!----> <a href="/plana/md-style.html" class="nav-link">
  笔记风格
</a></li><li class="dropdown-item"><!----> <a href="/plana/related-links.html" class="nav-link">
  友情链接
</a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Service Java(者)" class="dropdown-title"><span class="title">Service Java(者)</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch1-core-oop/" class="nav-link">
  Core Oop
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch2-utils-crud/" class="nav-link">
  Utils Crud
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch3-web-springboot/" class="nav-link">
  Web Springboot
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch4-micro-cloud/" class="nav-link">
  Micro Cloud
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch5-devops-native/" class="nav-link">
  Devops Native
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch6-platform-faas/" class="nav-link">
  Platform Faas
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch7-perf-jvm/" class="nav-link">
  Perf Jvm
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch8-arch-pmp/" class="nav-link">
  Arch Pmp
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch9-code-interview/" class="nav-link">
  Code Interview
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Ui Javascript(皆)" class="dropdown-title"><span class="title">Ui Javascript(皆)</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch1-core-prototype/" class="nav-link">
  Core Prototype
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch2-web3-html5/" class="nav-link">
  Web3 Html5
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch3-component-mvc/" class="nav-link">
  Component Mvc
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch4-service-nodejs/" class="nav-link">
  Service Nodejs
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/" class="nav-link router-link-active">
  Devops Scaffold
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch6-hybrid-webapp/" class="nav-link">
  Hybrid Webapp
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch7-visualizing-chart/" class="nav-link">
  Visualizing Chart
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch8-interaction-gl/" class="nav-link">
  Interaction Gl
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch9-code-interview/" class="nav-link">
  Code Interview
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Data Python(数)" class="dropdown-title"><span class="title">Data Python(数)</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch1-core-pymath/" class="nav-link">
  Core Pymath
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch2-utils-dataset/" class="nav-link">
  Utils Dataset
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch3-service-flask/" class="nav-link">
  Service Flask
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch4-bigdata-analysis/" class="nav-link">
  Bigdata Analysis
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch5-devops-auto/" class="nav-link">
  Devops Auto
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch6-ai-machine/" class="nav-link">
  Ai Machine
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch7-visualizing-gui/" class="nav-link">
  Visualizing Gui
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch8-control-embed/" class="nav-link">
  Control Embed
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch9-code-interview/" class="nav-link">
  Code Interview
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="关于" class="dropdown-title"><span class="title">关于</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://github.com/luo0412" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Github
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="/plana/about-me.html" class="nav-link">
  关于我
</a></li><li class="dropdown-item"><!----> <a href="/plana/md-style.html" class="nav-link">
  笔记风格
</a></li><li class="dropdown-item"><!----> <a href="/plana/related-links.html" class="nav-link">
  友情链接
</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/" aria-current="page" class="sidebar-link">README</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/01--ji-chu--qian-duan-gong-cheng-hua.html" class="sidebar-link">[基础]前端工程化</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/03--biao-zhun--qian-duan-gong-cheng--tong-yong-jie-gou-she-ji.html" class="sidebar-link">[标准]前端工程-通用结构设计</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/04--ti-gang--zeng-shan-gai-cha--chang-yong-pian-duan.html" class="sidebar-link">[提纲]增删改查-常用片段</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Devops</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>Case</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/devops/case/01--ji-chu-storybook.html" class="sidebar-link">[基础]storybook</a></li></ul></section></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/devops/01--ji-chu--qian-duan--ce-shi.html" class="sidebar-link">[基础]前端-测试</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/devops/02--ti-gang--qian-duan--ce-shi-kuang-jia-jest.html" class="sidebar-link">[提纲]前端-测试框架(Jest)</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/devops/03--fang-an--wen-dang-xi-tong-doc-api.html" class="sidebar-link">[方案]文档系统(Doc+API)</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/devops/06--fang-an--qian-duan--zi-dong-hua-bu-shu-docker.html" class="sidebar-link">[方案]前端自动化部署</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/devops/07--fang-an--qian-duan-jian-kong-yu-tong-ji--mai-dian.html" class="sidebar-link">[方案]前端监控与统计(埋点)</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Micro</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>Case</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/micro/case/02--fang-an--wei-qian-duan-react-qiankun.html" class="sidebar-link">[方案]微前端(react+qiankun)</a></li></ul></section></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/micro/01--ji-chu--wei-qian-duan.html" class="sidebar-link">[基础]微前端</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/micro/02--sheng-tai--wei-qian-duan-kuang-jia.html" class="sidebar-link">[生态]微前端框架</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/micro/03--ti-gang--wei-qian-duan--ye-wu-shi-jian.html" class="sidebar-link">[提纲]微前端-业务实践</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/micro/04-note--qian-duan-jia-gou--cong-ru-men-dao-wei-qian-duan.html" class="sidebar-link">[Note]前端架构-从入门到微前端</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Scaffold</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>Case</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/scaffold/case/03--ji-chu-webpack.html" class="sidebar-link">[基础]Webpack</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/scaffold/case/04--ji-chu-umi.html" class="sidebar-link">[基础]Umi</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/scaffold/case/06--ji-chu-vite.html" class="sidebar-link">[基础]vite</a></li></ul></section></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/scaffold/01--ji-chu--gong-cheng-hua-ast-dsl.html" class="sidebar-link">[基础]工程化(AST+DSL)</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/scaffold/02--ti-gang--gong-ju-lian-yu-gong-zuo-liu.html" class="sidebar-link">[提纲]工具链与工作流</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/scaffold/03--ji-chu--ren-wu-yun-xing-qi-gulp.html" class="sidebar-link">[基础]任务运行器(Gulp)</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/scaffold/04--ji-chu--mo-kuai-jia-zai-qi.html" class="sidebar-link">[基础]模块加载器</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/scaffold/05--fang-an--duo-ye-mian-mpa.html" class="sidebar-link">[方案]多页面(MPA)</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/scaffold/06--fang-an--duo-mo-kuai-mono.html" class="sidebar-link">[方案]多模块(Mono)</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Solution</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>Tricks</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/solution/tricks/01--ti-gang-vue-xiang-mu--shi-jian-ji-qiao-crud.html" class="sidebar-link">[提纲]Vue项目-实践技巧(crud)</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/solution/tricks/02--ti-gang-react-xiang-mu--shi-jian-ji-qiao-perf.html" class="sidebar-link">[提纲]React项目-实践技巧(perf)</a></li></ul></section></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/solution/01--fang-an--zeng-shan-gai-cha-dong-tai-biao-dan-formily.html" class="sidebar-link">[方案]增删改查+动态表单(Formily)</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/solution/02--fang-an--wu-liao-ku-di-dai-ma-ke-shi-hua-bian-cheng-iceworks.html" class="sidebar-link">[方案]物料库+低代码+可视化编程(iceworks)</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/solution/03--fang-an--tong-gou-ying-yong-fu-wu-duan-xuan-ran-nextjs-nuxtjs.html" class="sidebar-link">[方案]同构应用+服务端渲染(Nextjs+Nuxtjs)</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/solution/04-note-react-zhuang-tai-guan-li-yu-tong-gou-shi-zhan-2018.html" class="sidebar-link">[Note]React状态管理与同构实战</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Template</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>Case</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/template/case/01-vue-element-admin-vue-plop.html" class="sidebar-link">vue-element-admin(vue+plop)</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/template/case/02-ant-design-pro-react-umi-ts-hooks.html" aria-current="page" class="active sidebar-link">ant-design-pro(react+umi+ts+hooks)</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/template/case/04-ng-alain-ng-zorro-ms.html" class="sidebar-link">ng-alain(ng+zorro+ms)</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/template/case/07-easyweb-jquery-layui-ie8.html" class="sidebar-link">easyweb(jquery+layui+ie8)</a></li></ul></section></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/template/04--sheng-tai-vue--shi-yong-mo-ban.html" class="sidebar-link">[提纲]Vue-实用模板</a></li><li><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/template/05--sheng-tai-react--shi-yong-mo-ban.html" class="sidebar-link">[提纲]React-实用模板</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="ant-design-pro-react-umi-ts-hooks"><a href="#ant-design-pro-react-umi-ts-hooks" class="header-anchor">#</a> ant-design-pro(react+umi+ts+hooks)</h1> <ul><li>awesome-ant-design @old @messy
<ul><li><a href="https://github.com/websemantics/awesome-ant-design" target="_blank" rel="noopener noreferrer">https://github.com/websemantics/awesome-ant-design<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="常用文档"><a href="#常用文档" class="header-anchor">#</a> 常用文档</h1> <ul><li><p>TypeScript</p> <ul><li>@code <a href="https://www.tslang.cn/docs/handbook/basic-types.html" target="_blank" rel="noopener noreferrer">https://www.tslang.cn/docs/handbook/basic-types.html<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>antd</p> <ul><li>@doc
<ul><li><a href="https://3x.ant.design/components/table-cn/" target="_blank" rel="noopener noreferrer">https://3x.ant.design/components/table-cn/<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://ant.design/components/table-cn/" target="_blank" rel="noopener noreferrer">https://ant.design/components/table-cn/<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>@code <a href="https://github.com/ant-design" target="_blank" rel="noopener noreferrer">https://github.com/ant-design<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>@issue https://github.com/ant-design/ant-design/issues</li></ul></li> <li><p><code>antd pro</code></p> <ul><li>@doc
<ul><li><a href="http://pro.ant.design/docs/getting-started-cn" target="_blank" rel="noopener noreferrer">http://pro.ant.design/docs/getting-started-cn<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="http://pro.ant.design/components/avatar-list-cn" target="_blank" rel="noopener noreferrer">http://pro.ant.design/components/avatar-list-cn<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>@code <a href="https://github.com/ant-design/ant-design-pro" target="_blank" rel="noopener noreferrer">https://github.com/ant-design/ant-design-pro<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>@issue https://github.com/ant-design/ant-design-pro/issues</li> <li>@demo <a href="https://preview.pro.ant.design/list/table-list" target="_blank" rel="noopener noreferrer">https://preview.pro.ant.design/list/table-list<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p><code>pro-table</code></p> <ul><li>对表格操作做简化</li> <li>@code <a href="https://github.com/ant-design/pro-table" target="_blank" rel="noopener noreferrer">https://github.com/ant-design/pro-table<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>umi</p> <ul><li>@doc <a href="https://umijs.org/zh/guide/" target="_blank" rel="noopener noreferrer">https://umijs.org/zh/guide/<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>@code
<ul><li><a href="https://github.com/umijs/umi" target="_blank" rel="noopener noreferrer">https://github.com/umijs/umi<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://github.com/umijs/plugins" target="_blank" rel="noopener noreferrer">https://github.com/umijs/plugins<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul></li> <li><p>umi-request</p> <ul><li>@code <a href="https://github.com/umijs/umi-request" target="_blank" rel="noopener noreferrer">https://github.com/umijs/umi-request<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>@doc <a href="http://npm.taobao.org/package/umi-request" target="_blank" rel="noopener noreferrer">http://npm.taobao.org/package/umi-request<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>dva</p> <ul><li>@doc <a href="https://dvajs.com/guide/" target="_blank" rel="noopener noreferrer">https://dvajs.com/guide/<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>immutable</p> <ul><li>@code <a href="https://github.com/immutable-js/immutable-js" target="_blank" rel="noopener noreferrer">https://github.com/immutable-js/immutable-js<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>@doc <a href="https://immutable-js.github.io/immutable-js/" target="_blank" rel="noopener noreferrer">https://immutable-js.github.io/immutable-js/<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>lodash</p> <ul><li>@doc <a href="https://www.html.cn/doc/lodash/" target="_blank" rel="noopener noreferrer">https://www.html.cn/doc/lodash/<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>g2</p> <ul><li>@doc <a href="https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html" target="_blank" rel="noopener noreferrer">https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>g2Plot</p> <ul><li><a href="https://github.com/antvis/G2Plot" target="_blank" rel="noopener noreferrer">https://github.com/antvis/G2Plot<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>BizCharts @deprecated</p> <ul><li>@code <a href="https://github.com/alibaba/BizCharts" target="_blank" rel="noopener noreferrer">https://github.com/alibaba/BizCharts<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>@demo <a href="https://bizcharts.net/products/bizCharts/demo#%E6%8A%98%E7%BA%BF%E5%9B%BE" target="_blank" rel="noopener noreferrer">https://bizcharts.net/products/bizCharts/demo#折线图<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>tailwindcss</p> <ul><li>@doc <a href="https://www.tailwindcss.cn/docs/what-is-tailwind" target="_blank" rel="noopener noreferrer">https://www.tailwindcss.cn/docs/what-is-tailwind<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>async-validator</p> <ul><li>@doc <a href="https://github.com/yiminghe/async-validator#type" target="_blank" rel="noopener noreferrer">https://github.com/yiminghe/async-validator#type<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p><code>ant-design-pro-layout</code></p> <ul><li>@code <a href="https://github.com/ant-design/ant-design-pro-layout" target="_blank" rel="noopener noreferrer">https://github.com/ant-design/ant-design-pro-layout<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <hr> <h1 id="antd-pro"><a href="#antd-pro" class="header-anchor">#</a> antd-pro</h1> <ul><li>@doc <a href="https://pro.ant.design/docs/getting-started-cn" target="_blank" rel="noopener noreferrer">https://pro.ant.design/docs/getting-started-cn<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>@demo <a href="https://preview.pro.ant.design/list/table-list" target="_blank" rel="noopener noreferrer">https://preview.pro.ant.design/list/table-list<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>@code <a href="http://github.com/ant-design/ant-design-pro/" target="_blank" rel="noopener noreferrer">http://github.com/ant-design/ant-design-pro/<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <div class="language-js extra-class"><pre class="language-js"><code>浏览器支持<span class="token operator">:</span> <span class="token constant">IE11</span><span class="token operator">+</span> <span class="token operator">--</span><span class="token operator">&gt;</span> 也就是几乎告别兼容了<span class="token punctuation">,</span> 你要一开始就和<span class="token constant">PM</span>说清楚

<span class="token comment">// 使用体验</span>
<span class="token number">1</span><span class="token punctuation">)</span> 一些思路和实践值得借鉴
<span class="token number">2</span><span class="token punctuation">)</span> 如果要快速开发，要自行改造一下，这个模板很<span class="token string">&quot;重&quot;</span> <span class="token operator">--</span><span class="token operator">&gt;</span> 夹带了很多技术私货
<span class="token number">3</span><span class="token punctuation">)</span> 不要在大版本刚升级的时候尝鲜，入了很多坑<span class="token punctuation">,</span> 回头一看却发现官方修复了<span class="token operator">...</span>

权限控制可能还不是很好用

当然了<span class="token punctuation">,</span> 瑕不掩瑜
</code></pre></div><h1 id="pro-配置插件"><a href="#pro-配置插件" class="header-anchor">#</a> pro-配置插件</h1> <ul><li><p>npm插件</p> <ul><li>umi-plugin-react</li></ul></li> <li><p>vscode插件</p></li></ul> <div class="language-js extra-class"><pre class="language-js"><code>
eslint<span class="token operator">-</span>plugin<span class="token operator">-</span>react<span class="token operator">-</span>hooks 

dva<span class="token operator">??</span>
Ant Design Pro Helper<span class="token operator">??</span> 
</code></pre></div><ul><li>启动命令</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">npm</span> <span class="token function">install</span> -g cnpm --registry<span class="token operator">=</span>https://registry.npm.taobao.org
cnpm <span class="token function">install</span> umi --save-dev
</code></pre></div><ul><li>umi 常用配置</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// config/config.js</span>
<span class="token punctuation">{</span>
  <span class="token operator">...</span>
  <span class="token comment">// hash路由</span>
  history<span class="token operator">:</span> <span class="token string">'hash'</span><span class="token punctuation">,</span>
  hash<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>  
  <span class="token comment">// 输出路径</span>
  <span class="token comment">// outputPath: './dist',</span>
  <span class="token comment">// sb后端居然偷懒, 不想给页面准备nginx...</span>
  outputPath<span class="token operator">:</span> <span class="token string">'../../resources/static'</span><span class="token punctuation">,</span>
  <span class="token comment">// @TODO</span>
  <span class="token comment">// exportStatic: {</span>
  <span class="token comment">//   // dynamicRoot: '../example'</span>
  <span class="token comment">//   htmlSuffix: 'ftl'</span>
  <span class="token comment">// },</span>
<span class="token punctuation">}</span>
</code></pre></div><h1 id="pro-目录结构"><a href="#pro-目录结构" class="header-anchor">#</a> pro-目录结构</h1> <ul><li>通用结构</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>├── config                   # umi 配置，包含路由，构建等配置
├── mock                     # 本地模拟数据
├── <span class="token keyword">public</span>
│   └── favicon<span class="token punctuation">.</span>png          
├── src
│   ├── assets              
│   ├── components           
│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
│   ├── models               # 全局 dva model
│   ├── pages                
│   ├── services             
│   ├── utils                
│   ├── locales             
│   ├── global<span class="token punctuation">.</span>less          
│   └── global<span class="token punctuation">.</span>js            
├── tests                    # 测试工具
├── <span class="token constant">README</span><span class="token punctuation">.</span>md
└── <span class="token keyword">package</span><span class="token punctuation">.</span>json
</code></pre></div><p><img src="/static/images/antd/category.png" alt=""></p> <h1 id="pro-常见问题-faq"><a href="#pro-常见问题-faq" class="header-anchor">#</a> pro-常见问题 @faq</h1> <ul><li>关于antd @faq
<ul><li>使用v3的话先升级至最新v3.26.6</li> <li>设计比较朴素 --&gt; 不够风骚</li> <li><a href="https://ant.design/docs/react/faq-cn" target="_blank" rel="noopener noreferrer">https://ant.design/docs/react/faq-cn<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://github.com/ant-design/ant-design/issues" target="_blank" rel="noopener noreferrer">https://github.com/ant-design/ant-design/issues<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://github.com/ant-design/ant-design-pro/issues" target="_blank" rel="noopener noreferrer">https://github.com/ant-design/ant-design-pro/issues<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 日常吐槽</span>
可能是我理解不到位吧
好几次我都觉得<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">antd为了贴合某种设计理念而故意不去解决一些实际业务问题</span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">(</span>尽管它老早知道了那些问题<span class="token punctuation">)</span>

它的<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">一些“API缺陷”以及我们遇到的坑, 都可以解释为设计规范</span><span class="token template-punctuation string">`</span></span>
但这些问题在vue系的组件库里却神奇的不存在<span class="token operator">!</span><span class="token operator">!</span><span class="token operator">!</span>
例如
<span class="token function">tree默认全部展开</span><span class="token punctuation">(</span>defaultExpandAll<span class="token punctuation">)</span> <span class="token operator">--</span><span class="token operator">&gt;</span> 如果延迟获得数据<span class="token punctuation">,</span>这个<span class="token constant">API</span>就形同虚设
<span class="token function">给表单提供去空格</span><span class="token punctuation">(</span>v<span class="token operator">-</span>model<span class="token punctuation">.</span>trim<span class="token punctuation">)</span>功能 <span class="token operator">--</span><span class="token operator">&gt;</span> 这是很常用的业务需求<span class="token punctuation">,</span> <span class="token function">希望组件库能内置</span>
<span class="token punctuation">(</span>@os 
antd<span class="token operator">/</span>react<span class="token operator">:</span> 你用javascript处理一下下<span class="token punctuation">,</span> 不就好了
我<span class="token operator">:</span> 是啊可以<span class="token punctuation">,</span> 但是我的心好累累<span class="token operator">...</span><span class="token punctuation">)</span>
</code></pre></div><ul><li>关于<code>dva</code> <ul><li>目前感觉最不适应的地方, 尤其是和Typescript一起使用时 --&gt; 那种繁琐劲 @TODO</li> <li>所幸项目的大部分模块用不到状态管理...</li> <li>解决 dva 注销退出系统后再点击登入，<code>state数据未清空</code>的问题？
<ul><li><a href="https://www.jianshu.com/p/a4122272d615" target="_blank" rel="noopener noreferrer">https://www.jianshu.com/p/a4122272d615<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://github.com/dvajs/dva/issues/907" target="_blank" rel="noopener noreferrer">https://github.com/dvajs/dva/issues/907<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 功能 @TODO</span>
dva有数据全部清空重置的功能吗<span class="token operator">??</span> 

好像无法生效
暂时在退出登录的时候 location<span class="token punctuation">.</span><span class="token function">reload</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
这个有点坑<span class="token operator">...</span>
</code></pre></div><ul><li>关于TypeScript
<ul><li>tsx写累了, <code>可以悄悄混进去一点jsx</code> @myself</li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code>我目前简单页面或弹框直接用jsx
如果是分步骤的那种复杂业务页面
父组件用tsx<span class="token punctuation">,</span> 几个不太重要的子组件用jsx

当然这绝对不是什么好习惯<span class="token operator">!</span><span class="token operator">!</span><span class="token operator">!</span>
</code></pre></div><ul><li><p>umi-request按照规范, GET方法不支持request body发送</p></li> <li><p>设置defaultExpandAllRows={true}, 但<code>没有自动展开</code>问题 --&gt; 沦为<code>鸡肋API</code></p> <ul><li><a href="https://github.com/ant-design/ant-design/issues/4145" target="_blank" rel="noopener noreferrer">https://github.com/ant-design/ant-design/issues/4145<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>Table
  <span class="token comment">// @fix defaultExpandAllRows并没有生效的尴尬</span>
  key<span class="token operator">=</span><span class="token punctuation">{</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">table-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>activeKey<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>loading<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</span>
  defaultExpandAllRows<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
</code></pre></div><ul><li><p>给树状图添加编辑功能 @simple</p> <ul><li>TreeNode的title属性就是支持<code>ReactNode</code>类型的</li> <li>@code <a href="http://react-component.github.io/tree/examples/basic.html" target="_blank" rel="noopener noreferrer">http://react-component.github.io/tree/examples/basic.html<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>DatePicker不支持<code>年份选择</code>?</p> <ul><li><code>antd4.x</code>版本终于支持了 --&gt; 然而ElementUI一开始就支持</li> <li>在antd3.x要用change事件自行控制!!</li> <li>Ant Design中DatePicker设置mode=&quot;year&quot;无法获取value及关闭面板的解决方案
<ul><li><a href="https://juejin.im/post/5cf65c366fb9a07eca6968f9" target="_blank" rel="noopener noreferrer">https://juejin.im/post/5cf65c366fb9a07eca6968f9<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>【骚操作】antd YearPicker 实现
<ul><li><a href="https://www.jianshu.com/p/8abe28d8b28a" target="_blank" rel="noopener noreferrer">https://www.jianshu.com/p/8abe28d8b28a<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul></li></ul> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">FormItem</span></span> <span class="token spread"><span class="token punctuation">{</span><span class="token punctuation">...</span><span class="token attr-value">formLayout</span><span class="token punctuation">}</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>年月<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
  </span><span class="token punctuation">{</span>form<span class="token punctuation">.</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'month'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    rules<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>required<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> message<span class="token operator">:</span> <span class="token string">'必填'</span><span class="token punctuation">}</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DatePicker</span></span>
    <span class="token attr-name">open</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>isDatePickerOpen<span class="token punctuation">}</span></span>
    <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>month<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>请选择期刊年月<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>YYYY-MM<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">onOpenChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">status</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token function">setIsDatePickerOpen</span><span class="token punctuation">(</span>status<span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
    <span class="token attr-name">onPanelChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token function">setIsDatePickerOpen</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
      form<span class="token punctuation">.</span><span class="token function">setFieldsValue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        month<span class="token operator">:</span> value
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
  <span class="token punctuation">/&gt;</span></span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">FormItem</span></span><span class="token punctuation">&gt;</span></span>

<span class="token comment">// @fix </span>
允许allowClear
再选择可能会失效<span class="token operator">??</span>
</code></pre></div><ul><li>表单重置时Switch等组件无效?
<ul><li>使用<code>valuePropName</code></li> <li>但用group包装的checkbox,radio又是不需要的 --&gt; 具体要看到底有没有这个属性</li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>FormItem label<span class="token operator">=</span><span class="token string">&quot;状态&quot;</span><span class="token operator">&gt;</span>
    <span class="token punctuation">{</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'type'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      initialValue<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
      <span class="token comment">// @fix Form外的自定义组件需要指定</span>
      valuePropName<span class="token operator">:</span> <span class="token string">'checked'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token operator">&lt;</span>Switch checkedChildren<span class="token operator">=</span><span class="token string">&quot;开&quot;</span> unCheckedChildren<span class="token operator">=</span><span class="token string">&quot;关&quot;</span>  <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>FormItem<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>FormItem label<span class="token operator">=</span><span class="token string">&quot;状态&quot;</span><span class="token operator">&gt;</span>
    <span class="token punctuation">{</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'type'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      initialValue<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
      <span class="token comment">// @fix radio.group没有checked属性</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token operator">&lt;</span>Radio<span class="token punctuation">.</span>Group<span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>Radio<span class="token punctuation">.</span>Group<span class="token operator">&gt;</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>FormItem<span class="token operator">&gt;</span>
</code></pre></div><ul><li><code>如何在函数组件中拿到 form 实例</code>？ --&gt; 文档上有写, 用<code>wrappedComponentRef</code> --&gt; 感觉用着好烦</li></ul> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> forwardRef<span class="token punctuation">,</span> useImperativeHandle <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> Form<span class="token punctuation">,</span> <span class="token punctuation">{</span> FormComponentProps <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd/lib/form/Form'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> FCForm <span class="token operator">=</span> forwardRef<span class="token operator">&lt;</span>FormComponentProps<span class="token punctuation">,</span> FCFormProps<span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> form<span class="token punctuation">,</span> onSubmit <span class="token punctuation">}</span><span class="token punctuation">,</span> ref</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token function">useImperativeHandle</span><span class="token punctuation">(</span>ref<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
    form<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">...the rest of your form</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> EnhancedFCForm <span class="token operator">=</span> Form<span class="token punctuation">.</span>create<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">FCFormProps</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">()(FCForm);

// Demo
const TestForm = () =&gt; </span><span class="token punctuation">{</span>
  <span class="token keyword">const</span> formRef <span class="token operator">=</span> createRef<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Ref</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">();
  return (
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">EnhancedFCForm</span></span>
      <span class="token attr-name">onSubmit</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>formRef<span class="token punctuation">.</span>current<span class="token operator">!</span><span class="token punctuation">.</span>form<span class="token punctuation">.</span><span class="token function">getFieldValue</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
      <span class="token attr-name">wrappedComponentRef</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>formRef<span class="token punctuation">}</span></span>
    <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
  );
};
</span></code></pre></div><ul><li>下拉框选项内容过长, 无法显示完全 @simple --&gt; <code>直接span加title属性</code></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>Option value<span class="token operator">=</span><span class="token punctuation">{</span>itemm<span class="token punctuation">.</span>value<span class="token punctuation">}</span> key<span class="token operator">=</span><span class="token punctuation">{</span>itemm<span class="token punctuation">.</span>value<span class="token punctuation">}</span><span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>span title<span class="token operator">=</span><span class="token punctuation">{</span>itemm<span class="token punctuation">.</span>name<span class="token punctuation">}</span><span class="token operator">&gt;</span><span class="token punctuation">{</span>itemm<span class="token punctuation">.</span>name<span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Option<span class="token operator">&gt;</span><span class="token punctuation">)</span>
</code></pre></div><ul><li>表单如何较优雅地<code>去空格</code>? --&gt; 自定义hooks/高阶组件</li></ul> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token comment">// 利用高阶组件实现 Input 去除首尾空格</span>
<span class="token comment">// https://github.com/chenwangji/blog/issues/9</span>
<span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> <span class="token function-variable function">WithBlurTrim</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">WrappedComponent</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
  <span class="token keyword">class</span> <span class="token class-name">WrapperComponent</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
    <span class="token comment">// 去除头尾空格</span>
    <span class="token function-variable function">handleBlur</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value <span class="token operator">=</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value <span class="token operator">&amp;&amp;</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">const</span> <span class="token punctuation">{</span> onChange <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">;</span>
      <span class="token function">onChange</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">WrappedComponent</span></span>
        <span class="token attr-name">onBlur</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleBlur<span class="token punctuation">}</span></span>
        <span class="token spread"><span class="token punctuation">{</span><span class="token punctuation">...</span><span class="token attr-value">this</span><span class="token punctuation">.</span><span class="token attr-value">props</span><span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> WithBlurTrim<span class="token punctuation">;</span>

<span class="token comment">// 使用时</span>
<span class="token keyword">const</span> TrimInput <span class="token operator">=</span> <span class="token function">WithBlurTrim</span><span class="token punctuation">(</span>Input<span class="token punctuation">)</span>
<span class="token operator">...</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">FormItem</span></span>  <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>材料规格<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
  </span><span class="token punctuation">{</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'materialFormat'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    rules<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token comment">// 仅初始化去空格</span>
      <span class="token comment">// { transform: (value) =&gt; value.trim() },</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">TrimInput</span></span> <span class="token attr-name">allowClear</span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">FormItem</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ul><li>Table 翻页如何<code>同步 selectedRows 和 selectedRowKeys 数据</code>?
<ul><li>只是同步id, 是支持的</li> <li>更多数据则需要自行函数实现, 这部分代码很难保证通用</li> <li><a href="https://github.com/ant-design/ant-design-pro/issues/2811" target="_blank" rel="noopener noreferrer">https://github.com/ant-design/ant-design-pro/issues/2811<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-jsx extra-class"><pre class="language-jsx"><code>state <span class="token operator">=</span> <span class="token punctuation">{</span>
  selectedRowKeys<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  selectedRows<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>

<span class="token function-variable function">onSelectChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">selectedRowKeys<span class="token punctuation">,</span> selectedRows</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">// Notice: _.uniqBy 默认保留老数据，如果数据需要更新，可另行实现去重方法</span>
    <span class="token keyword">let</span> _selectedRows <span class="token operator">=</span> _<span class="token punctuation">.</span><span class="token function">uniqBy</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>selectedRows<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>selectedRows<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">'id'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    _selectedRows <span class="token operator">=</span> _<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>_selectedRows<span class="token punctuation">,</span> <span class="token parameter">o</span> <span class="token operator">=&gt;</span> selectedRowKeys<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>o<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      selectedRowKeys<span class="token punctuation">,</span>
      selectedRows<span class="token operator">:</span> _selectedRows<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><ul><li><code>表格里嵌套表格</code> <ul><li>直接单元格内容里渲染个表格进去, 调整下样式</li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
    title<span class="token operator">:</span> <span class="token string">'地区'</span><span class="token punctuation">,</span>
    dataIndex<span class="token operator">:</span> <span class="token string">'area'</span><span class="token punctuation">,</span>
    <span class="token function-variable function">render</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">text<span class="token punctuation">,</span> record<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token punctuation">{</span><span class="token string">'typo embedCell'</span><span class="token punctuation">}</span> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> margin<span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>table<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>tbody<span class="token operator">&gt;</span>
        <span class="token punctuation">{</span> record<span class="token punctuation">.</span>areaPrices<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token operator">&lt;</span>tr rowSpan<span class="token operator">=</span><span class="token punctuation">{</span>record<span class="token punctuation">.</span>areaPrices<span class="token punctuation">.</span>length<span class="token punctuation">}</span> key<span class="token operator">=</span><span class="token punctuation">{</span>index<span class="token punctuation">}</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>td<span class="token operator">&gt;</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>area<span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>td<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>tr<span class="token operator">&gt;</span><span class="token punctuation">)</span> <span class="token punctuation">}</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>tbody<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>table<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><ul><li><p>表格行列各种合并</p> <ul><li>需要精心计算, 不断设定rowspan, colspan累skr人</li> <li>直接考虑用表格提供的<code>树形结构</code>实现交互, <code>去说服产品经理</code> !!!</li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// antd-table 支持功能</span>
表头只支持列合并，
使用 column 里的 colSpan 进行设置

表格支持行<span class="token operator">/</span>列合并，
使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 <span class="token number">0</span> 时，设置的表格不会渲染
</code></pre></div><ul><li><code>expandedRowRender + treeTable</code>一起用好像是不支持的 --&gt; 瞬间感觉功能残废</li></ul> <p><img src="/static/images/javascript/antd-table-nested.png" alt=""></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 1) components需要重写body</span>
row
cell

<span class="token comment">// 2) 隐藏expandIcon</span>
这样不用处理折叠的逻辑 <span class="token operator">--</span><span class="token operator">&gt;</span> 去自定义icon

<span class="token comment">// 代码</span>
<span class="token punctuation">.</span>ant<span class="token operator">-</span>table<span class="token operator">-</span>row<span class="token operator">-</span>expand<span class="token operator">-</span>icon <span class="token punctuation">{</span>
  visibility<span class="token operator">:</span> hidden<span class="token operator">!</span>important<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> <span class="token function-variable function">EditableRow</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> index<span class="token punctuation">,</span> <span class="token operator">...</span>props <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> indentLevel <span class="token operator">=</span> <span class="token number">0</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>props<span class="token punctuation">.</span>className<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'ant-table-row-level-0'</span><span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    indentLevel <span class="token operator">=</span> <span class="token number">1</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>props<span class="token punctuation">.</span>className<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'ant-table-row-level-1'</span><span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    indentLevel <span class="token operator">=</span> <span class="token number">2</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">return</span> <span class="token operator">&lt;</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>tr <span class="token punctuation">{</span><span class="token operator">...</span>props<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token punctuation">{</span>
      <span class="token punctuation">(</span>
        props<span class="token punctuation">.</span>children
        <span class="token operator">&amp;&amp;</span> <span class="token operator">!</span>props<span class="token punctuation">.</span>children<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>record<span class="token punctuation">.</span>children
        <span class="token operator">&amp;&amp;</span> props<span class="token punctuation">.</span>children<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>record<span class="token punctuation">.</span>listDetails
        <span class="token operator">&amp;&amp;</span> panelVisibleArr<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>props<span class="token punctuation">.</span>children<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>record<span class="token punctuation">.</span>id<span class="token punctuation">)</span>
      <span class="token punctuation">)</span>
      <span class="token operator">&amp;&amp;</span> <span class="token operator">&lt;</span>tr<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>td colSpan<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">8</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>Table
            className<span class="token operator">=</span><span class="token punctuation">{</span><span class="token string">&quot;nested&quot;</span><span class="token punctuation">}</span>
            style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
              marginLeft<span class="token operator">:</span> indentLevel <span class="token operator">*</span> <span class="token number">20</span> <span class="token operator">+</span> <span class="token number">10</span><span class="token punctuation">,</span>
            <span class="token punctuation">}</span><span class="token punctuation">}</span>
            size<span class="token operator">=</span><span class="token string">&quot;small&quot;</span>
            bordered
            dataSource<span class="token operator">=</span><span class="token punctuation">{</span>props<span class="token punctuation">.</span>children<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>record<span class="token punctuation">.</span>listDetails<span class="token punctuation">}</span>
            rowKey<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">record</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>record<span class="token punctuation">.</span>id <span class="token operator">?</span> <span class="token punctuation">(</span>record<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token string">'key'</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
            columns<span class="token operator">=</span><span class="token punctuation">{</span>nestedColumns<span class="token punctuation">}</span>
            pagination<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span>
            <span class="token comment">// indentSize={10}</span>
          <span class="token operator">/</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>td<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>tr<span class="token operator">&gt;</span>
    <span class="token punctuation">}</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> <span class="token function-variable function">EditableCell</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>children<span class="token punctuation">,</span> <span class="token operator">...</span>props<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token operator">&lt;</span>td <span class="token punctuation">{</span><span class="token operator">...</span>props<span class="token punctuation">}</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span>div<span class="token operator">&gt;</span>
    <span class="token punctuation">{</span>children<span class="token punctuation">}</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>td<span class="token operator">&gt;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><ul><li>为什么Ant-Design的<code>Table性能这么低</code>？
<ul><li>好些表格表单交互复杂的页面都出现卡顿...</li> <li>想换个表格组件先 @TODO --&gt; @eg ali-react-table/react-table/rsuite/uxcore????</li> <li><code>先考虑能否分页</code>, 减少数据量!!! 目前web的表格直接硬刚性能都会jj</li> <li><a href="https://www.zhihu.com/question/319837974/answer/669464674" target="_blank" rel="noopener noreferrer">https://www.zhihu.com/question/319837974/answer/669464674<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code>虚拟滚动要求每个cell都是定高的，否则没法计算虚拟滚动的位置

table<span class="token operator">/</span>th<span class="token operator">/</span>td<span class="token operator">/</span>tbody<span class="token operator">/</span>thead这些标签的渲染是比div渲染慢的<span class="token operator">!</span><span class="token operator">!</span>

只能每次都做全量渲染才能做数据同步，根本没法做分布式渲染

React Concurrent<span class="token operator">??</span>
</code></pre></div><ul><li>antd-table<code>单元格编辑</code>功能
<ul><li>当数据量几十行, 表单几百个时?? <code>性能</code>就感觉不太好, 渲染更新有点卡卡的PPT的感觉</li> <li>不过和产品经理提出这种坑爹功能需求也有关</li> <li>以前jquery却不会出现这种情况, <code>有时候真不知道技术是进步了还是退步了</code></li> <li>@code <a href="https://github.com/ant-design/editable-table" target="_blank" rel="noopener noreferrer">https://github.com/ant-design/editable-table<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> @building</li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 场景需求</span>
所有单元格直接处于可编辑状态
当编辑一行的数据失去焦点时<span class="token punctuation">,</span> 发送请求<span class="token punctuation">,</span> 返回结果要及时更新到界面上

欲哭无泪<span class="token operator">...</span>

<span class="token comment">// 几种试过的写法</span>
<span class="token number">1</span><span class="token punctuation">)</span> column render <span class="token operator">+</span> onChange 
<span class="token number">2</span><span class="token punctuation">)</span> editable <span class="token function">context</span> <span class="token punctuation">(</span>onCell<span class="token punctuation">)</span> <span class="token operator">--</span><span class="token operator">&gt;</span> 这种好像更容易卡顿<span class="token operator">??</span> @<span class="token constant">TODO</span>
</code></pre></div><p><img src="/static/images/antd/table-editable.png" alt=""></p> <ul><li><p>Table下的Pagination不支持禁用Disabled?? @fix --&gt; v3.18.1以上貌似支持</p></li> <li><p>modal.confirm在useState之后, 值好像不能及时更新?? @TODO @fix</p></li> <li><p><code>isSelectOptGroup</code>的诡异报错?? @TODO</p> <ul><li><a href="https://github.com/ant-design/ant-design/issues/20317" target="_blank" rel="noopener noreferrer">https://github.com/ant-design/ant-design/issues/20317<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p><code>全局配置</code>有设置按钮的默认size等功能吗?? --&gt; antd4.x可能支持</p></li> <li><p>如何让Upload里的其他按钮不触发上传文件的事件??</p> <ul><li>暂时用<code>相对布局</code>放按钮的位置</li> <li>现在的上传列表是强制换行的</li></ul></li> <li><p><code>antd覆盖了我的全局样式</code> --&gt; 无解, 等死吧!! 一开始设计的问题 @TODO</p></li> <li><p>FormItem下放两个<code>关联的表单</code>会有红色warning @ignore</p> <ul><li>目前仅为警告, 影响不大</li> <li>实际业务碰到这种需求怎么办??</li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">[</span>antd<span class="token operator">:</span> Form<span class="token punctuation">.</span>Item<span class="token punctuation">]</span> Cannot generate <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">validateStatus</span><span class="token template-punctuation string">`</span></span> and <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">help</span><span class="token template-punctuation string">`</span></span> automatically<span class="token punctuation">,</span> <span class="token keyword">while</span> there are more than one <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">getFieldDecorator</span><span class="token template-punctuation string">`</span></span> <span class="token keyword">in</span> it<span class="token punctuation">.</span>
</code></pre></div><ul><li><p>Table 组件的自定义渲染出现丢失焦点的情况，无法正常输入??</p> <ul><li>暂时不要用memo/useMemo等性能优化, 要想又不会出问题, 待复现 @TODO</li> <li>vue好像不存在这个问题, 可能是渲染理念不一样, 欲哭无泪!! @myself</li></ul></li> <li><p><code>tabs页面切换性能消耗过大</code>, 在ie11下切换卡顿!!!</p> <ul><li><a href="https://github.com/ant-design/ant-design/issues/20003" target="_blank" rel="noopener noreferrer">https://github.com/ant-design/ant-design/issues/20003<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code>我一般上来就直接关闭动画
可惜目前还没有全局配置功能<span class="token operator">...</span>

animated<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span>
</code></pre></div><ul><li><code>树组件再次点击同一节点, onSelect传值可能带来的误会</code>, 要注意!!
<ul><li>@eg 重置数据的逻辑</li> <li>这算是敲代码的人自己的问题</li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">onTreeSelect</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">selectedKeys<span class="token operator">:</span> string<span class="token punctuation">[</span><span class="token punctuation">]</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token comment">// @fix 树节点再次点击上一次的节点时忽略, 不需要处理</span>
  <span class="token comment">// @tip 再次点击, 返回值可能是[]</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>selectedKeys<span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">0</span> <span class="token operator">&amp;&amp;</span> selectedKeys<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">!==</span> currentRoleId<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">setCurrentRoleId</span><span class="token punctuation">(</span>selectedKeys<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span>

    <span class="token comment">// 重置数据</span>
    <span class="token function">setCheckedTreeKeys</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li><code>动态菜单</code>/动态路由, 即<code>由后台返回菜单</code> <ul><li>umi里路由router是属于配置的一部分</li> <li>是否需要<code>设置组件路径component</code>?? --&gt; 还是<code>可维护性</code>的问题</li> <li>文档上写如何从服务器请求菜单？ --&gt; 修改<code>menuDataRender</code></li> <li><a href="https://github.com/ant-design/ant-design-pro/issues/5249" target="_blank" rel="noopener noreferrer">https://github.com/ant-design/ant-design-pro/issues/5249<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://blog.csdn.net/antdz/article/details/104369471" target="_blank" rel="noopener noreferrer">https://blog.csdn.net/antdz/article/details/104369471<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://github.com/ant-design/ant-design-pro/issues/5565" target="_blank" rel="noopener noreferrer">https://github.com/ant-design/ant-design-pro/issues/5565<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://github.com/umijs/plugin-access" target="_blank" rel="noopener noreferrer">https://github.com/umijs/plugin-access<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>@code <a href="https://github.com/sunft1996/ant-back" target="_blank" rel="noopener noreferrer">https://github.com/sunft1996/ant-back<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">MenuDataItem</span> <span class="token punctuation">{</span>
  authority<span class="token operator">?</span><span class="token operator">:</span> string<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">|</span> string<span class="token punctuation">;</span>
  children<span class="token operator">?</span><span class="token operator">:</span> MenuDataItem<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  hideChildrenInMenu<span class="token operator">?</span><span class="token operator">:</span> boolean<span class="token punctuation">;</span>
  hideInMenu<span class="token operator">?</span><span class="token operator">:</span> boolean<span class="token punctuation">;</span>
  icon<span class="token operator">?</span><span class="token operator">:</span> string<span class="token punctuation">;</span>
  locale<span class="token operator">?</span><span class="token operator">:</span> string<span class="token punctuation">;</span>
  name<span class="token operator">?</span><span class="token operator">:</span> string<span class="token punctuation">;</span>
  path<span class="token operator">:</span> string<span class="token punctuation">;</span>
  <span class="token punctuation">[</span>key<span class="token operator">:</span> string<span class="token punctuation">]</span><span class="token operator">:</span> any<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><hr> <h1 id="pro-区块开发"><a href="#pro-区块开发" class="header-anchor">#</a> pro-区块开发</h1> <ul><li>使用</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code>umi block list
umi block <span class="token function">add</span> https://github.com/umijs/umi-blocks/tree/master/blank
npx umi block <span class="token function">add</span> AccountSettings --js

<span class="token comment"># 将所有区块下载到当前项目中</span>
<span class="token function">npm</span> run fetch:blocks
<span class="token comment"># 尝试删除项目中所有的 i18n 代码</span>
<span class="token function">npm</span> run i18n-remove
</code></pre></div><ul><li><p>pro-blocks</p> <ul><li>@code <a href="https://github.com/ant-design/pro-blocks" target="_blank" rel="noopener noreferrer">https://github.com/ant-design/pro-blocks<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>@doc <a href="https://umijs.org/zh/guide/block.html#%E5%8C%BA%E5%9D%97%E5%BC%80%E5%8F%91" target="_blank" rel="noopener noreferrer">https://umijs.org/zh/guide/block.html#区块开发<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>ant Design Pro区块安装npm run fetch:blocks问题解决 @doubt @fix</p> <ul><li>这功能刚开始推出时, 压根下载不成功..., 而且感觉代码被“掏空”了</li> <li><a href="https://segmentfault.com/a/1190000019911077" target="_blank" rel="noopener noreferrer">https://segmentfault.com/a/1190000019911077<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// config/config.ts配置 </span>
<span class="token comment">// umi版本v2.7.0+</span>
<span class="token comment">// &quot;@ant-design/pro-cli&quot; 升级到1.0.8版本</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  block<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// defaultGitUrl: 'https://github.com/ant-design/pro-blocks',</span>
    <span class="token comment">// github访问太慢</span>
    defaultGitUrl<span class="token operator">:</span> <span class="token string">'https://gitee.com/ant-design/pro-blocks'</span><span class="token punctuation">,</span>
    <span class="token comment">// 优先级低于 umi block add [block] --npm-client</span>
    npmClient<span class="token operator">:</span> <span class="token string">'cnpm'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token operator">...</span>
<span class="token punctuation">}</span>
</code></pre></div><h1 id="pro-常用业务组件-todo"><a href="#pro-常用业务组件-todo" class="header-anchor">#</a> pro-常用业务组件 @TODO</h1> <ul><li>可倒计时的“发送验证码”</li> <li>文字自适应</li></ul> <hr> <h1 id="pro-文案规范"><a href="#pro-文案规范" class="header-anchor">#</a> pro-文案规范</h1> <ul><li>您 --&gt; <code>你</code>(拉近与用户之间的距离)</li> <li>新增 --&gt; <code>新建</code></li> <li>修改 --&gt; <code>编辑</code></li> <li>其它 --&gt; <code>其他</code></li> <li>该 --&gt; <code>此</code></li> <li>对不起 --&gt; <code>抱歉</code></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 提示语</span>
如果是我们系统造成的结果，可以使用抱歉
但如果是用户自己造成的结果，仅给出错误提示
</code></pre></div><h1 id="pro-eslint"><a href="#pro-eslint" class="header-anchor">#</a> pro-ESLint</h1> <ul><li>eslint如何设置?</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">[</span>vscode<span class="token punctuation">]</span> 
eslint插件并不会默认去校验 <span class="token punctuation">.</span>ts文件
将tslint交给eslint校验
需要禁用tslint并如下设置 可能需要重启vscode 

<span class="token string">&quot;eslint.validate&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
  <span class="token string">&quot;javascript&quot;</span><span class="token punctuation">,</span>
  <span class="token string">&quot;javascriptreact&quot;</span><span class="token punctuation">,</span>
  <span class="token string">&quot;typescript&quot;</span><span class="token punctuation">,</span>
  <span class="token string">&quot;typescriptreact&quot;</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
</code></pre></div><h1 id="pro-文件上传下载"><a href="#pro-文件上传下载" class="header-anchor">#</a> pro-文件上传下载</h1> <ul><li>fetch上传</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> formData <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">FormData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> fileField <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&quot;input[type='file']&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
formData<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">'username'</span><span class="token punctuation">,</span> <span class="token string">'abc123'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
formData<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">'avatar'</span><span class="token punctuation">,</span> fileField<span class="token punctuation">.</span>files<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'https://example.com/profile/avatar'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  method<span class="token operator">:</span> <span class="token string">'PUT'</span><span class="token punctuation">,</span>
  body<span class="token operator">:</span> formData
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token operator">=&gt;</span> response<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">'Error:'</span><span class="token punctuation">,</span> error<span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Success:'</span><span class="token punctuation">,</span> response<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ul><li>链接下载</li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>http://somehost/somefile.zip<span class="token punctuation">&quot;</span></span> <span class="token attr-name">download</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>filename.zip<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Download file<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ul><li>fetch下载</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'http://somehost/somefile.zip'</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> res<span class="token punctuation">.</span><span class="token function">blob</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">blob</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> a <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> url <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>blob<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> filename <span class="token operator">=</span> <span class="token string">'myfile.zip'</span><span class="token punctuation">;</span>
    a<span class="token punctuation">.</span>href <span class="token operator">=</span> url<span class="token punctuation">;</span>
    a<span class="token punctuation">.</span>download <span class="token operator">=</span> filename<span class="token punctuation">;</span>
    a<span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    window<span class="token punctuation">.</span><span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">revokeObjectURL</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre></div><h1 id="pro-国际化"><a href="#pro-国际化" class="header-anchor">#</a> pro-国际化</h1> <ul><li>React项目国际化(antd)多语言开发 @simple
<ul><li>使用<code>react-intl</code></li> <li>应该做到不刷新页面就做到语言的实时切换</li> <li><a href="https://juejin.im/post/5d11ae8b6fb9a07ee4637047" target="_blank" rel="noopener noreferrer">https://juejin.im/post/5d11ae8b6fb9a07ee4637047<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 基本思路</span>
<span class="token keyword">const</span> lang <span class="token operator">=</span> window<span class="token punctuation">.</span>navigator<span class="token punctuation">.</span>language<span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> helloworld <span class="token operator">=</span> lang <span class="token operator">===</span> <span class="token string">'en-US'</span> <span class="token operator">?</span> <span class="token string">'hello world'</span> <span class="token operator">:</span> <span class="token string">'你好'</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token operator">&lt;</span>div<span class="token operator">&gt;</span><span class="token punctuation">{</span>helloworld<span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>v2-<code>如何移除国际化</code> @old
<ul><li>Antd-Pro全球化功能隐藏 https://www.jianshu.com/p/7c05a62fc612</li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code>v2很难移除此功能<span class="token operator">...</span>

ant<span class="token operator">-</span>pro v4以上版本开始支持移除国际化功能
但是支持也不是很全面
</code></pre></div><h1 id="pro-请求"><a href="#pro-请求" class="header-anchor">#</a> pro-请求</h1> <ul><li>umi-request
<ul><li>@doc <a href="http://npm.taobao.org/package/umi-request" target="_blank" rel="noopener noreferrer">http://npm.taobao.org/package/umi-request<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> request <span class="token operator">=</span> <span class="token function">extend</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">// The maximum number of caches. When it is exceeded, </span>
  <span class="token comment">// it will automatically clear the first one according to the time.</span>
  maxCache<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
  prefix<span class="token operator">:</span> <span class="token string">'/api/v1'</span><span class="token punctuation">,</span> 
  suffix<span class="token operator">:</span> <span class="token string">'.json'</span><span class="token punctuation">,</span> 
  <span class="token function-variable function">errorHandler</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">// Centralized processing error</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  headers<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// unified headers</span>
    Some<span class="token operator">:</span> <span class="token string">'header'</span> 
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  params<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// the query parameter to be included with each request</span>
    Hello<span class="token operator">:</span> <span class="token string">'world'</span> 
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h1 id="pro-路由守卫"><a href="#pro-路由守卫" class="header-anchor">#</a> pro-路由守卫</h1> <ul><li>SecurityLayout处理权限登录
<ul><li><a href="https://github.com/ant-design/ant-design-pro/issues/5640" target="_blank" rel="noopener noreferrer">https://github.com/ant-design/ant-design-pro/issues/5640<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://github.com/ant-design/ant-design-pro/pull/5252" target="_blank" rel="noopener noreferrer">https://github.com/ant-design/ant-design-pro/pull/5252<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://github.com/ant-design/ant-design-pro/issues/5382" target="_blank" rel="noopener noreferrer">https://github.com/ant-design/ant-design-pro/issues/5382<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://github.com/ant-design/ant-design-pro/issues/5628" target="_blank" rel="noopener noreferrer">https://github.com/ant-design/ant-design-pro/issues/5628<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://github.com/ant-design/ant-design-pro/issues/3426" target="_blank" rel="noopener noreferrer">https://github.com/ant-design/ant-design-pro/issues/3426<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 1) 使用 layout/securityLayout</span>
<span class="token keyword">const</span> isLogin <span class="token operator">=</span> <span class="token function">getLocalStorage</span><span class="token punctuation">(</span><span class="token constant">TOKEN_KEY</span><span class="token punctuation">.</span><span class="token constant">TOKEN</span><span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token keyword">null</span>
<span class="token operator">...</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token operator">!</span>isLogin <span class="token operator">&amp;&amp;</span> loading<span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token operator">!</span>isReady<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token operator">&lt;</span>PageLoading <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>isLogin<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token operator">&lt;</span>Redirect to<span class="token operator">=</span><span class="token punctuation">{</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/user/login?</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>queryString<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>Redirect<span class="token operator">&gt;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> children<span class="token punctuation">;</span>

<span class="token comment">// 2) 登出注销的时候</span>
重置token<span class="token punctuation">,</span> currentUser等信息<span class="token operator">!</span><span class="token operator">!</span><span class="token operator">!</span><span class="token operator">!</span><span class="token operator">!</span><span class="token operator">!</span>
antd<span class="token operator">-</span>pro默认模板可能没有处理这件事
</code></pre></div><hr> <h1 id="pro-表单-todo"><a href="#pro-表单-todo" class="header-anchor">#</a> pro-表单 @TODO</h1> <ul><li>formily</li> <li><code>form-render</code></li> <li>sula @building</li></ul> <h1 id="pro-懒加载"><a href="#pro-懒加载" class="header-anchor">#</a> pro-懒加载</h1> <ul><li>umi配置</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 直接配置</span>
dynamicImport<span class="token operator">:</span> <span class="token punctuation">{</span>
  loadingComponent<span class="token operator">:</span> <span class="token string">'./components/PageLoading/index'</span><span class="token punctuation">,</span>
  webpackChunkName<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  level<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>

<span class="token comment">// 或者chainWebpack</span>
config<span class="token punctuation">.</span>optimization<span class="token punctuation">.</span><span class="token function">splitChunks</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    chunks<span class="token operator">:</span> <span class="token string">'async'</span><span class="token punctuation">,</span>
    minSize<span class="token operator">:</span> <span class="token number">30000</span><span class="token punctuation">,</span>
    maxSize<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
    minChunks<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
    maxAsyncRequests<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
    maxInitialRequests<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
    automaticNameDelimiter<span class="token operator">:</span> <span class="token string">'~'</span><span class="token punctuation">,</span>
    name<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    cacheGroups<span class="token operator">:</span> <span class="token punctuation">{</span>
      vendors<span class="token operator">:</span> <span class="token punctuation">{</span>
        name<span class="token operator">:</span> <span class="token string">'vendors'</span><span class="token punctuation">,</span>
        chunks<span class="token operator">:</span> <span class="token string">'all'</span><span class="token punctuation">,</span>
        test<span class="token operator">:</span> <span class="token regex">/[\\/]node_modules[\\/](react|react-dom|react-router|react-router-dom|lodash|lodash-decorators|redux-saga|re-select|dva|moment)[\\/]/</span><span class="token punctuation">,</span>
        priority<span class="token operator">:</span> <span class="token operator">-</span><span class="token number">10</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      antdesigns<span class="token operator">:</span> <span class="token punctuation">{</span>
        name<span class="token operator">:</span> <span class="token string">'antdesigns'</span><span class="token punctuation">,</span>
        chunks<span class="token operator">:</span> <span class="token string">'all'</span><span class="token punctuation">,</span>
        test<span class="token operator">:</span> <span class="token regex">/[\\/]node_modules[\\/](@ant-design|antd)[\\/]/</span><span class="token punctuation">,</span>
        priority<span class="token operator">:</span> <span class="token operator">-</span><span class="token number">11</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 
</code></pre></div><ul><li><code>umi-dynamic</code></li></ul> <h1 id="pro-图表"><a href="#pro-图表" class="header-anchor">#</a> pro-图表</h1> <ul><li><code>echarts + echarts-for-react</code> @nice</li> <li>g2Plot</li> <li><s>BizCharts</s></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// BizCharts</span>
对<span class="token constant">G2</span>进行了封装

在导出图片 以及一些数据格式处理上
之前试用的时候
还是有诸多不如意的地方

目前还是推荐使用echarts<span class="token operator">-</span><span class="token keyword">for</span><span class="token operator">-</span>react<span class="token operator">!</span><span class="token operator">!</span><span class="token operator">!</span>
</code></pre></div><h1 id="pro-图标"><a href="#pro-图标" class="header-anchor">#</a> pro-图标</h1> <ul><li><p>ant-design-icons @org</p> <ul><li><a href="https://github.com/ant-design/ant-design-icons" target="_blank" rel="noopener noreferrer">https://github.com/ant-design/ant-design-icons<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>ant-design-icons</p> <ul><li>可以自由地在 React、Vue 或其他框架中使用它 @nice</li> <li><a href="https://github.com/fjc0k/ant-design-icons" target="_blank" rel="noopener noreferrer">https://github.com/fjc0k/ant-design-icons<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="pro-主题"><a href="#pro-主题" class="header-anchor">#</a> pro-主题</h1> <ul><li><p><code>暗黑模式</code> --&gt; pro-alyout</p></li> <li><p>antd-theme-webpack-plugin</p> <ul><li><a href="https://github.com/mzohaibqc/antd-theme-webpack-plugin" target="_blank" rel="noopener noreferrer">https://github.com/mzohaibqc/antd-theme-webpack-plugin<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>ant-design-dark-theme</p> <ul><li><a href="https://github.com/ant-design/ant-design-dark-theme" target="_blank" rel="noopener noreferrer">https://github.com/ant-design/ant-design-dark-theme<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-less extra-class"><pre class="language-less"><code><span class="token comment">// modifyVars</span>
<span class="token selector">export default</span> <span class="token punctuation">{</span>
  <span class="token comment">// 若已有配置</span>
  <span class="token property">outputPath</span><span class="token punctuation">:</span> <span class="token string">&quot;./build&quot;</span><span class="token punctuation">,</span>

  <span class="token comment">// 加入 theme 定义</span>
  <span class="token selector">theme:</span> <span class="token punctuation">{</span>
    <span class="token string">&quot;@primary-color&quot;</span><span class="token punctuation">:</span> <span class="token string">&quot;#30b767&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 绿色</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><hr> <h1 id="pro-单元测试"><a href="#pro-单元测试" class="header-anchor">#</a> pro-单元测试</h1> <ul><li>思路</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 思路</span>
通过测试虚拟 dom 的表现是否正常来测试组件的逻辑
让编写组件的测试能够脱离对浏览器 dom 环境的依赖

umi 内置 jest 测试
匹配所有 <span class="token punctuation">.</span>test<span class="token punctuation">.</span>js 结尾的文件
</code></pre></div><ul><li>jest + enzyme</li></ul> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> mount <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'enzyme'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> TestDemo <span class="token keyword">from</span> <span class="token string">'../src/component/TestDemo'</span><span class="token punctuation">;</span>

<span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'TestDemo'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> wrapper <span class="token operator">=</span> <span class="token function">mount</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">TestDemo</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token function">expect</span><span class="token punctuation">(</span>wrapper<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h1 id="pro-前端部署"><a href="#pro-前端部署" class="header-anchor">#</a> pro-前端部署</h1> <p>...</p> <hr> <h1 id="antd-第三方组件"><a href="#antd-第三方组件" class="header-anchor">#</a> antd-第三方组件</h1> <ul><li><p>braft-editor @nice</p></li> <li><p>Antd motion @nice</p> <ul><li>快速在 React 框架中使用动画</li> <li>@doc <a href="https://motion.ant.design/index-cn" target="_blank" rel="noopener noreferrer">https://motion.ant.design/index-cn<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>sunflower???</p> <ul><li>A <code>react-hooks</code> + antd library from Alipay Industry Technology department</li> <li><a href="https://github.com/ant-design/sunflower" target="_blank" rel="noopener noreferrer">https://github.com/ant-design/sunflower<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> useFormTable <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'sunflower-antd'</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">Component</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> form <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">{</span> formProps<span class="token punctuation">,</span> tableProps <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useFormTable</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    form<span class="token punctuation">,</span>
    defaultPageSize<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
    <span class="token keyword">async</span> <span class="token function">search</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> current<span class="token punctuation">,</span> pageSize<span class="token punctuation">,</span> username<span class="token punctuation">,</span> email <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> result <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span> current<span class="token punctuation">,</span> pageSize<span class="token punctuation">,</span> username<span class="token punctuation">,</span> email <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">return</span> <span class="token punctuation">{</span>
        dataSource<span class="token operator">:</span> result<span class="token punctuation">.</span>list<span class="token punctuation">,</span>
        total<span class="token operator">:</span> result<span class="token punctuation">.</span>total<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Form</span></span> <span class="token attr-name">layout</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>inline<span class="token punctuation">&quot;</span></span> <span class="token spread"><span class="token punctuation">{</span><span class="token punctuation">...</span><span class="token attr-value">formProps</span><span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Form.Item</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>Username<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token punctuation">{</span> form<span class="token punctuation">.</span><span class="token function">getFieldDecorator</span><span class="token punctuation">(</span><span class="token string">'username'</span><span class="token punctuation">)</span><span class="token punctuation">(</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Input</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>Username<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text"> 
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Form.Item</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Form.Item</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> form<span class="token punctuation">.</span><span class="token function">resetFields</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          Reset
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Form.Item</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Form.Item</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">htmlType</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          Search
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Form.Item</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Form</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">

    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Table</span></span>
      <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
          title<span class="token operator">:</span> <span class="token string">'Username'</span><span class="token punctuation">,</span>
          dataIndex<span class="token operator">:</span> <span class="token string">'username'</span><span class="token punctuation">,</span>
          key<span class="token operator">:</span> <span class="token string">'username'</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">]</span><span class="token punctuation">}</span></span>
      <span class="token attr-name">rowKey</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span>
      <span class="token spread"><span class="token punctuation">{</span><span class="token punctuation">...</span><span class="token attr-value">tableProps</span><span class="token punctuation">}</span></span>
    <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li><p><code>antd-password-input-strength</code> @nice</p> <ul><li>密码加强, 好像不是很轻量??</li> <li>@code <a href="https://github.com/Kombustor/antd-password-input-strength" target="_blank" rel="noopener noreferrer">https://github.com/Kombustor/antd-password-input-strength<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>antd-doddle</p> <ul><li>前端表单封装和方法库</li> <li>不一定适合自己业务, 但可以参考</li> <li>@by <a href="https://github.com/closertb" target="_blank" rel="noopener noreferrer">https://github.com/closertb<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>@code <a href="https://github.com/closertb/antd-doddle" target="_blank" rel="noopener noreferrer">https://github.com/closertb/antd-doddle<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>@doc <a href="http://doc.closertb.site/packages/EnhanceTable" target="_blank" rel="noopener noreferrer">http://doc.closertb.site/packages/EnhanceTable<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 常用正则</span>
chineseWord<span class="token operator">:</span> <span class="token regex">/^([\u4e00-\u9fa5])+$/</span><span class="token punctuation">,</span> <span class="token comment">// 中文输入</span>
normalWord<span class="token operator">:</span> <span class="token regex">/^([\u4e00-\u9fa5-a-zA-Z0-9_-—])+$/</span><span class="token punctuation">,</span> <span class="token comment">// 常规字符输入</span>
email<span class="token operator">:</span> <span class="token regex">/^([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+(?:\.[0-9A-Za-z]+)+$/</span><span class="token punctuation">,</span> <span class="token comment">// 邮箱校验</span>
phone<span class="token operator">:</span> <span class="token regex">/^((13[0-9])|(14[0-9])|(15[0-9])|(16[0-9])|(17[0-9])|(18[0-9])|(19[0-9]))\d{8}$/</span><span class="token punctuation">,</span> <span class="token comment">// 电话号码格式校验</span>
fix2<span class="token operator">:</span> <span class="token regex">/^([1-9]\d*$)|([1-9]\d*\.(\d{1,2})$)|(0\.((0[1-9])|([1-9]\d?))$)/</span><span class="token punctuation">,</span> <span class="token comment">// 大于0，最多保留两位小数</span>
positive<span class="token operator">:</span> <span class="token regex">/(^0\.0*[1-9]+[0-9]*$)|(^[1-9]\d*(\.\d+)?$)/</span><span class="token punctuation">,</span> <span class="token comment">// 正数</span>
positiveInteger<span class="token operator">:</span> <span class="token regex">/^[1-9]\d*$/</span><span class="token punctuation">,</span> <span class="token comment">// 正整数</span>
notNegtive<span class="token operator">:</span> <span class="token regex">/^\d*(\.\d+)?$/</span><span class="token punctuation">,</span> <span class="token comment">// 正数或0</span>
notNegtiveInteger<span class="token operator">:</span> <span class="token regex">/^\d*$/</span><span class="token punctuation">,</span> <span class="token comment">// 正整数或0</span>
rate<span class="token operator">:</span> <span class="token regex">/^0\.0[1-9]\d{0,3}$|^0\.10{0,4}$/</span><span class="token punctuation">,</span> <span class="token comment">// 输入0.01-0.1（含）之间，最多可输入五位小数</span>
rate2<span class="token operator">:</span> <span class="token regex">/^0(\.0\d{0,4})?$|^0\.10{0,4}$/</span><span class="token punctuation">,</span> <span class="token comment">// 输入0-0.1（含）之间，最多可输入五位小数</span>
amount<span class="token operator">:</span> <span class="token regex">/(^[1-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/</span><span class="token punctuation">,</span> <span class="token comment">// 金额最多两位小数</span>
percent<span class="token operator">:</span> <span class="token regex">/^100$|^([1-9]|[1-9]\d)(\.\d{1,2})*$/</span><span class="token punctuation">,</span> <span class="token comment">// 1-100百分比 最多两位小数</span>
thousandth<span class="token operator">:</span> <span class="token regex">/(\d{1,3})(?=(\d{3})+$)/g</span><span class="token punctuation">,</span> <span class="token comment">//整数千分位 '13456789'.replace(reg,'$1,')</span>
thousandthWithPoint<span class="token operator">:</span> <span class="token regex">/(\d{1,3})(?=(\d{3})+(\.|$))/g</span><span class="token punctuation">,</span> <span class="token comment">//小数加千分位  '1253456789.89'.replace(reg,'$1,')</span>
</code></pre></div><ul><li><p>ant-design-plus</p> <ul><li><code>验证码</code>+文字自适应+滚动选项卡</li> <li>@code <a href="https://github.com/alitajs/ant-design-plus/" target="_blank" rel="noopener noreferrer">https://github.com/alitajs/ant-design-plus/<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>antd-table-infinity</p> <ul><li>infinite scroll, based on antd-table</li> <li>@code <a href="https://github.com/Leonard-Li777/antd-table-infinity" target="_blank" rel="noopener noreferrer">https://github.com/Leonard-Li777/antd-table-infinity<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>react-lz-editor</p> <ul><li>rich-text editor</li> <li>@code <a href="https://github.com/leejaen/react-lz-editor" target="_blank" rel="noopener noreferrer">https://github.com/leejaen/react-lz-editor<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>antd-amplify-react</p> <ul><li>Aws Amplify Auth flow</li> <li>aws权限 封装</li> <li>@code <a href="https://github.com/mzohaibqc/antd-amplify-react" target="_blank" rel="noopener noreferrer">https://github.com/mzohaibqc/antd-amplify-react<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="antd-第三方组件-deprecated"><a href="#antd-第三方组件-deprecated" class="header-anchor">#</a> antd-第三方组件 @deprecated</h1> <ul><li><p>antd-data-table @old</p> <ul><li>combines antd's Table and Form to do the search, display, and operating jobs for data</li> <li>@by djyde https://github.com/djyde</li> <li>@code <a href="https://github.com/NewbeeFE/antd-data-table" target="_blank" rel="noopener noreferrer">https://github.com/NewbeeFE/antd-data-table<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>antd-kit @old</p> <ul><li>Advanced ant design components</li> <li>@code <a href="https://github.com/huhulab/antd-kit" target="_blank" rel="noopener noreferrer">https://github.com/huhulab/antd-kit<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <hr> <h1 id="pro-社区改造版本"><a href="#pro-社区改造版本" class="header-anchor">#</a> pro-社区改造版本</h1> <ul><li>antd-design-pro-learn @nice
<ul><li>uform + ts + hooks</li> <li>@code
<ul><li><a href="https://github.com/Ljhhhhhh/antd-design-pro-learn" target="_blank" rel="noopener noreferrer">https://github.com/Ljhhhhhh/antd-design-pro-learn<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://github.com/Ljhhhhhh/react-hooks" target="_blank" rel="noopener noreferrer">https://github.com/Ljhhhhhh/react-hooks<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 区块下载 先下载到本地</span>
umi block add <span class="token operator">/</span>Users<span class="token operator">/</span><span class="token keyword">void</span><span class="token operator">/</span>Documents<span class="token operator">/</span>www<span class="token operator">/</span>learn<span class="token operator">/</span>pro<span class="token operator">-</span>blocks<span class="token operator">/</span>ListBasicList 
  <span class="token operator">--</span>path<span class="token operator">=</span><span class="token operator">/</span>user<span class="token operator">/</span>list

<span class="token comment">// uform</span>
UForm中的事件需要在他提供的effects中去处理的，
直接在Filed上写例如onChange是没有用的  

<span class="token comment">// SchemaForm中监听</span>
<span class="token operator">&lt;</span>SchemaForm
  effects<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">$</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;onFieldChange&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">fieldState</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;onFormInit&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">formState</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;onFormMount&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">formState</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;onFormReset&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">formState</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;onFormSubmit&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">formState</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">)</span><span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token comment">// Field中监听</span>
<span class="token operator">&lt;</span>Field
  title<span class="token operator">=</span><span class="token string">&quot;一级分类&quot;</span>
  <span class="token keyword">enum</span><span class="token operator">=</span><span class="token punctuation">{</span>categoryParentList<span class="token punctuation">}</span>
  type<span class="token operator">=</span><span class="token string">&quot;string&quot;</span>
  name<span class="token operator">=</span><span class="token string">&quot;parentCategoryId&quot;</span>
  required
  x<span class="token operator">-</span>effect<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      <span class="token function">onChange</span><span class="token punctuation">(</span><span class="token parameter">categoryId<span class="token operator">:</span> number</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token function">getCategoryList</span><span class="token punctuation">(</span>categoryId<span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
</code></pre></div><ul><li><p>antd-pro-mobx @nice</p> <ul><li>相对较好的一个轻量改造版本</li> <li>umi + dva --&gt; webpack + mobx</li> <li>@code <a href="https://github.com/gzgogo/antd-pro-mobx" target="_blank" rel="noopener noreferrer">https://github.com/gzgogo/antd-pro-mobx<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>ts-react-webpack @nice</p> <ul><li>typescript + mobx</li> <li>感觉这个模板的css写起来很别扭</li> <li>@code <a href="https://github.com/YDJ-FE/ts-react-webpack" target="_blank" rel="noopener noreferrer">https://github.com/YDJ-FE/ts-react-webpack<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>ant-back</p> <ul><li>后台动态菜单</li> <li>@code
<ul><li><a href="https://github.com/sunft1996/ant-back" target="_blank" rel="noopener noreferrer">https://github.com/sunft1996/ant-back<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://github.com/sunft1996/ant-back-server/" target="_blank" rel="noopener noreferrer">https://github.com/sunft1996/ant-back-server/<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>@demo <a href="http://back.1cloud.xyz/general" target="_blank" rel="noopener noreferrer">http://back.1cloud.xyz/general<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>admin-project @simple</p> <ul><li>umi + typescript + antd</li> <li><a href="https://github.com/Hyg900928/admin-project" target="_blank" rel="noopener noreferrer">https://github.com/Hyg900928/admin-project<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">class</span> <span class="token class-name">component</span>的写法确实存在很多冗余代码<span class="token operator">...</span>
改进切换到react hooks吧<span class="token operator">...</span>
</code></pre></div><ul><li>egg-ant-design-pro
<ul><li><a href="https://github.com/eggjs/egg-ant-design-pro" target="_blank" rel="noopener noreferrer">https://github.com/eggjs/egg-ant-design-pro<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="pro-社区改造版本-deprecated"><a href="#pro-社区改造版本-deprecated" class="header-anchor">#</a> pro-社区改造版本 @deprecated</h1> <ul><li><p>ReactTypescriptAntdBackstage ??</p> <ul><li>typescript + cra</li> <li><a href="https://gitee.com/yhf7/ReactTypescriptAntdBackstage" target="_blank" rel="noopener noreferrer">https://gitee.com/yhf7/ReactTypescriptAntdBackstage<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>react-easy-start @messy</p> <ul><li>create-react-app + ant-design-pro</li> <li><a href="https://github.com/sunnut/react-easy-start" target="_blank" rel="noopener noreferrer">https://github.com/sunnut/react-easy-start<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>CLReactAntDesign @old</p> <ul><li>飞冰搭建</li> <li>egg + antd !!!</li> <li>@code <a href="https://github.com/chenliang2016/CLReactAntDesign" target="_blank" rel="noopener noreferrer">https://github.com/chenliang2016/CLReactAntDesign<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>create-react-app-antd @simple</p> <ul><li>Use antd in create-react-app without ejecting</li> <li>@doc <a href="https://ant.design/docs/react/use-with-create-react-app-cn" target="_blank" rel="noopener noreferrer">https://ant.design/docs/react/use-with-create-react-app-cn<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>@code <a href="https://github.com/ant-design/create-react-app-antd" target="_blank" rel="noopener noreferrer">https://github.com/ant-design/create-react-app-antd<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>v3-typescript-and-maybe-hooks @old</p> <ul><li>废弃的一个官方版本</li> <li><a href="https://github.com/ant-design/ant-design-pro/tree/v3-typescript-and-maybe-hooks" target="_blank" rel="noopener noreferrer">https://github.com/ant-design/ant-design-pro/tree/v3-typescript-and-maybe-hooks<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>example-pawjs-ant-design @old @nice</p> <ul><li>PWA思路参考</li> <li>@code <a href="https://github.com/Atyantik/example-pawjs-ant-design" target="_blank" rel="noopener noreferrer">https://github.com/Atyantik/example-pawjs-ant-design<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>react-seed @old</p> <ul><li>jQuery + ajax</li> <li>@code <a href="https://github.com/JasonBai007/react-seed" target="_blank" rel="noopener noreferrer">https://github.com/JasonBai007/react-seed<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>reactSPA @old
<ul><li><a href="https://github.com/JasonBai007/reactSPA" target="_blank" rel="noopener noreferrer">https://github.com/JasonBai007/reactSPA<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul></li> <li><p>cra-ts-antd @old</p> <ul><li>Create-React-App + TypeScript + Ant-Design (without Eject)</li> <li>@code <a href="https://github.com/comerc/cra-ts-antd" target="_blank" rel="noopener noreferrer">https://github.com/comerc/cra-ts-antd<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>webbf @old</p> <ul><li>Java Web工程demo</li> <li>@code <a href="https://github.com/peterchenhdu/webbf" target="_blank" rel="noopener noreferrer">https://github.com/peterchenhdu/webbf<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <hr> <h1 id="参考"><a href="#参考" class="header-anchor">#</a> 参考</h1> <ul><li>Ant Design Pro V5 已经支持预览 @simple
<ul><li><a href="https://zhuanlan.zhihu.com/p/141740103" target="_blank" rel="noopener noreferrer">https://zhuanlan.zhihu.com/p/141740103<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-java extra-class"><pre class="language-java"><code><span class="token comment">// 数据流方案</span>
dva <span class="token operator">--</span><span class="token operator">&gt;</span> <span class="token annotation punctuation">@umijs</span><span class="token operator">/</span>plugin<span class="token operator">-</span>model 

<span class="token comment">// 权限管理</span>
useAccess
</code></pre></div><ul><li><p>Ant Design 实战教程 @simple</p> <ul><li>@doc <a href="https://www.yuque.com/ant-design/course" target="_blank" rel="noopener noreferrer">https://www.yuque.com/ant-design/course<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>dva-model @nice
<ul><li>讲一些思路</li> <li><a href="https://www.yuque.com/ant-design/course/dsl8ee" target="_blank" rel="noopener noreferrer">https://www.yuque.com/ant-design/course/dsl8ee<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://www.yuque.com/ant-design/course/ig6mzb" target="_blank" rel="noopener noreferrer">https://www.yuque.com/ant-design/course/ig6mzb<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>@code <a href="https://github.com/ant-design/react-tutorial" target="_blank" rel="noopener noreferrer">https://github.com/ant-design/react-tutorial<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>Ant Design Pro 使用中遇到的问题汇总 @simple</p> <ul><li><a href="https://www.jianshu.com/p/344c5e540eaa" target="_blank" rel="noopener noreferrer">https://www.jianshu.com/p/344c5e540eaa<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>Input-<code>Accept</code></p> <ul><li>@doc <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 直接指定后缀</span>
accept<span class="token operator">:</span> <span class="token string">'.xlsx,.xls'</span><span class="token punctuation">,</span>

<span class="token comment">// accept anything that smells like an MS Word document</span>
accept<span class="token operator">=</span><span class="token string">&quot;.doc,.docx,.xml,application/msword, \
  application/vnd.openxmlformats-officedocument.wordprocessingml.document&quot;</span>


<span class="token comment">// 常用类型</span>
<span class="token string">&quot;image/jpeg&quot;</span>    <span class="token string">&quot;jpg&quot;</span>
<span class="token string">&quot;image/jpeg&quot;</span>    <span class="token string">&quot;jpeg&quot;</span>
<span class="token string">&quot;image/png&quot;</span>     <span class="token string">&quot;png&quot;</span>
<span class="token string">&quot;image/webp&quot;</span>    <span class="token string">&quot;webp&quot;</span>
<span class="token string">&quot;application/vnd.ms-excel&quot;</span>    <span class="token string">&quot;xls&quot;</span>
<span class="token string">&quot;application/vnd.openxmlformats-officedocument.spreadsheetml.sheet&quot;</span>    <span class="token string">&quot;xlsx&quot;</span>
<span class="token string">&quot;application/msword&quot;</span>    <span class="token string">&quot;doc&quot;</span>
<span class="token string">&quot;application/vnd.openxmlformats-officedocument.wordprocessingml.document&quot;</span>    <span class="token string">&quot;docx&quot;</span>
<span class="token string">&quot;application/vnd.openxmlformats-officedocument.presentationml.presentation&quot;</span>    <span class="token string">&quot;pptx&quot;</span>
<span class="token string">&quot;application/vnd.ms-powerpoint&quot;</span>    <span class="token string">&quot;ppt&quot;</span>
<span class="token string">&quot;application/pdf&quot;</span>    <span class="token string">&quot;pdf&quot;</span>
</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/template/case/01-vue-element-admin-vue-plop.html" class="prev">
        vue-element-admin(vue+plop)
      </a></span> <span class="next"><a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/template/case/04-ng-alain-ng-zorro-ms.html">
        ng-alain(ng+zorro+ms)
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/plana/assets/js/app.26a35d46.js" defer></script><script src="/plana/assets/js/2.b5bc497d.js" defer></script><script src="/plana/assets/js/466.272ea41f.js" defer></script>
  </body>
</html>
